CODEWITHSUNDEEP
htmlcssgoogle-chromeinputborder
Peter
Peter

Reputation: 393

Chromes input border in red

I would like to use this css setting: border-color: red;
For input elements.
But when I do so, the metrics of them differ from the default chrome border.

Please look at this jsfiddle:
http://jsfiddle.net/79QkJ/2/

There you can see that both input fields look different. But the only difference that should be visible is the red color, as you would excpect it.

How to replicate the default style of input's just in another color?

Upvotes: 0

Views: 178

Answers (4)

Michael Lawton
Michael Lawton

Reputation: 1510

The default style may look like border-width: 1px; but it is actually (at least in chrome) border: 2px inset;. The inset style doesn't really seem to work well with red.

You could use something like

border-color: 1px solid red;
padding: 2px 1px;

The default padding is 1px 0; so that needs to be increased to 2px 1px.

http://jsfiddle.net/79QkJ/13/

Upvotes: 2

user2689345
user2689345

Reputation:

you can try it : 

#red-input {
    border-color: red;
    border-style: solid;
    border-width: 0.1em;
}

Or also the meta boder property :

#red-input {
    border: 0.1em solid red;
}

Note I'm use to "em" for the size but you can also user "px".

Upvotes: 0

Kevin
Kevin

Reputation: 53

Wouldnt that be incorrect usage of the border?

" The border property is a shorthand for the following individual border properties: border-width border-style (required) border-color "

Leaving the browser space to think for itself.

Upvotes: 0

Frisbetarian-Support Palestine
Frisbetarian-Support Palestine

Reputation: 1309

Try this

input:focus, select:focus, textarea:focus, button:focus { outline: none; }

Upvotes: 0

Related Questions