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

Let's say I have a default text input without any CSS

<input type="text" />

I want to change its border color to red so I add an style

<input type="text" style="border-color:red" />

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?

Set a transparent border and then change it:

.default{
border: 2px solid transparent;
}

.new{
border: 2px solid red;
}

use this, it won't effect height:

<input type="text" style="border:1px solid #ff0000" />

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.

Try this

<input type="text"/>

It will display same in all cross browser like mozilla , chrome and internet explorer.

<style>
    input{
       border:2px solid #FF0000;
    }
</style>

Dont add style inline because its not good practise, use class to add style for your input box.

Is this what you are looking for.

$("input.address_field").on('click', function(){  
     $(this).css('border', '2px solid red');
});