How Do I Change An Inputs Border Colour Without Changing The Style?

I'm trying to do something pretty simply; change the border colour of an input. In both IE11 and latest stable Chrome, changing the color also changes how it looks (appears 3D/thic

Solution 1:

In IE11 and Chrome, this got me matching boxes.

As for why... browsers will be browsers?

<inputtype="text" value="Default" />
<inputtype="text" value="Default" style="padding: 2px 1px; border: 1px solid red" />

http://jsfiddle.net/S2TxT/11/

EDIT

After further investigation, it becomes apparent why this might happen: http://jsfiddle.net/S2TxT/18/

Solution 2:

This is the simplest way I can find of fixing the problem. Unfortunately, it involves changing the height CSS. Crazy, I know, just for a border color change!

<inputtype="text" value="Default" />
<inputtype="text" style="border: 1px #cecece solid; padding: 2px; height: 16px;" />

http://jsfiddle.net/S2TxT/10/

Solution 3:

add class to the input : html :

<inputclass="border" />

css:

.border { border: 1px solid #ddd; /*you can write your hex code for color replacing #ddd*/}

Solution 4:

I would recommend inspecting the CSS being applied to those input elements using FireBug lite.

http://getfirebug.com/firebuglite

Most browsers set their own CSS as default for input boxes and it's annoyingly convoluted to say the least. Goole chrome for instance, sets an inset border and then overrides it some places in different ways depending on the side of the input box.

If you look in the Inspect Element Computed CSS box for the input element, you will see what is applied and see how to overide it.

Solution 5:

Use the below CSS:

input{
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    border:1px solid grey;
}
input:last-child{
    border-color: red;
}

Note that different browsers apply different default styles to elements which can go against your expectations.

You may want to look at using something like CSS Reset so you can more easily anticipate the results applying your CSS across all browsers.

You can also look at applying appearance:none; to your input elements to override browser specific styling directly.

Have a look HERE for a more comprehensive fiddle.