CODEWITHSUNDEEP
css
danjah
danjah

Reputation: 1246

How to make all borders the same color?

I have a simple form, with text fields that I'm trying to have borders in the same color. For some reason the left and top borders appear in a slightly different color, which appear to be some kind of shadow. How do I get rid of it?

I'm using this (relevant) CSS to style the text fields:

input[type="text"] {
    border-color: red;
    border-width: 2px;
}

The result is this:

enter image description here

I've also tried adding this piece of code, but with no luck:

-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;

Any help will be much appreciated. Thanks!

Upvotes: 2

Views: 285

Answers (2)

APAD1
APAD1

Reputation: 13666

This is due to the default input styling applied by your browser, which sets the border-style to inset. You can get your desired styling, and simplify your CSS rule by changing your CSS to:

input[type="text"] {
  border:2px solid red;
}
<input type="text" />
<br/><br/>
<input type="text" />

Upvotes: 4

j08691
j08691

Reputation: 207913

Add border-style:solid;

input[type="text"] {
    border-color: red;
    border-width: 2px;
    border-style:solid;
}
<input type="text"/>

I believe "inset" is the default for many browsers for text inputs.

Upvotes: 5

Related Questions