How do I change an inputs border colour without changing the style?

Viewed 2883

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/thicker):

Wonkey CSS Borders

If I try "1px solid red" then the border looks the same, but the size changes!

  1. Why does changing the colour seem to do more than just change the colour
  2. How can I just change the colour without changing anything else (style, thickness, spacing, size, etc.)

I've tried messing with border-width and other properties, but none of them result in the exact same size/spacing as the default with only the colour changed :(

(Please try your changes in JSFiddle before posting... so many people are posting bad answers and then deleting them! http://jsfiddle.net/S2TxT/4/)

<input type="text" value="Default" />
<input type="text" style="border: 1px solid red" />
6 Answers
Related