Example Navigation

Example 6: CSS for zooming and focus styling

Best Practice Rating: Good

CSS styling of input to make it easier to identify when control has focus and so it scales better when zooming.
CSS font-size property with the value of 100% to support zooming.
CSS background-color property on the CSS pseudo properties :focus and :active.to set background color of control when it receives keyboard focus.
CSS background-color property on the CSS pseudo property :hover to mimic the styling effects of keyboard focus.

Example Start

Name

E-mail

Comment

Example End

HTML Source Code

<div class="text">
    <label for="name">Name</label>
    <input type="text" size="30" name="name" id="name"/>
</div>

<div class="text">
    <label for="email">E-mail</label>
    <input type="text" size="25" name="email" id="email"/>
</div>

<div class="text">
    <label for="comment">Comment</label>
    <textarea rows="5" cols="50" name="comment" id="comment"></textarea>
</div>

CSS Source Code