[SOLVED] input problem

[adv]

when i put the mouse in the input box it will change color and border

the problem is that when i put the mouse right on the border it keeps showing the hover form and the initial form .. very fast

what can i do to solve it ??

u can try and see for yourself if u don`t understand what i`m saying :|

thanks in advance

 

 

 

<input type="password" name="password" size="40"/>

 

input:hover {
border:1px solid #000000;
color:black;

}

 

[xtopolis]

The reason this happens is because it changes size by 1px when it applies the border.

 

A quick fix is to set a height for input and input:hover.

 

input {

  height: 18px;

}

 

input {

  height: 18px;

  border: 1px solid black;

}

 

You should note that the width is affected the same way.  Also, I tried this in FF3 - IE tab, and the hover effect was not supported... fyi.

[themistral]

You could also just set a border for the non-hover - set the color to the background color.

 

input{border:1px solid #fff; }
input:hover {
border:1px solid #000000;
color:black;
}

 

or as far as I am aware, you would need to reduce the height for the hover box to allow for the border, so

 

input {
  height:20px;
}

input {
  height: 18px;
  border: 1px solid black;
}

 

The 18px for height and 2 lots of 1px for the border make up the 20px.

Haven't tried any of them out - so post back and let us know which solution if any worked for you!

[adv]

thanks alot for ur answers .. it will help