Change input text border color without changing its height

Question

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?

Answer 1

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.

Answer 2

use this, it won't effect height:

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