Example Navigation

Example 5: 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

Up load file

Example End

HTML Source Code

<div class="file">
<label for="file">Up load file</label>
<input type="file" size="30" name="name" id="file"/>
</div>

CSS Source Code

  <style type="text/css">
div.file label {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  display: block;
  font-size: 100%;
}

div.file input {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  margin-bottom: .5em;
  display: block;
  outline:transparent thin solid;
  font-size: 100%;
}

div.file input:active,
div.file input:focus,
{
  outline-color: black;
  background-color: yellow;
}

div.file input:hover {
  outline-color: black;
}

  </style>