Change input text border color without changing its height

Question

Let s say I have a default text input without any CSS   lt input type  text    gt    I want to change its border color to red so I add an style   lt input type  text  style  border-color red    gt    After that the border is red  but its size is 2px  If I change the border to 1px the height of the input will be smaller than a default one   How can I change my border to 1px and assure that the true height of the input  including the border  is the same as an default one

User · Answer

Try this   lt input type  text   gt    It will display same in all cross browser like mozilla   chrome and internet explorer    lt style gt      input         border 2px solid  FF0000         lt  style gt    Dont add style inline because its not good practise  use class to add style for your input box

User · Answer

use this  it won t effect height    lt input type  text  style  border 1px solid  ff0000    gt

User · Answer

This css solution worked for me   input active  input focus       border  1px solid  red    input active  input focus       padding  2px solid  red   for firefox and chrome          ie is a class you would need to set at the html root level     ie input active   ie input focus       padding  3px solid  red    IE needs 1px extra padding       I understand it is not necessary on FF and Chrome  but IE needs it  And there are circumstances when you need it

User · Answer

Set a transparent border and then change it    default  border  2px solid transparent      new  border  2px solid red

User · Answer

Is this what you are looking for      input address field   on  click   function             this  css  border    2px solid red

[html] Change input text border color without changing its height

Examples related to html

Examples related to css

Examples related to border