Question

i have this css to highlight input when they are in focus:

input:focus, textarea:focus{  
  background-color: #FFFF99;  
  border-width: 1px;  
  border-style:solid;  
  border-color:Black;  
}

i just noticed that when i click on a textbox it shrinks by a very small but noticable amount. Is there any reason why the css above would change the width & height of a textbox when i have it in focus?

i am using firefox 3.16

Answer 1

it shrinks because the default borders of a textarea input are 2-3px and you’re only overriding them to 1px in the focus state

it won’t shrink if you override the default borders to be the same width e.g.:

input, textarea {
  border: 1px solid #444;
}

input:focus, textarea:focus{  
 background-color: #FFFF99;  
 border-width: 1px;  
 border-style:solid;  
 border-color:Black;  
 }

Update

to retain original dimensions without recalculating for borders this appears to work:

input, textarea {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 300px;
  height: 50px;

}

input:focus, textarea:focus{  
 background-color: #FFFF99;  
 border-width: 1px;  
 border-style:solid;  
 border-color:#000;  
 }