Question 161436 in CSS Question posted in
Some basic documentation can be found here.

Why is the top & left of an input element darker than the other sides?

I am applying this simple css on an input element for it to have a uniform, thin border which is lightgray in color, on ALL sides. However, I find that two of the sides appear darker ? or it is a shadow property of some kind ? What can be done to make it uniform on all sides ?

input {
  border-width: thin;
  border-color: lightgray;
  box-shadow: none;
  outline: none;
}
<input>

enter image description here

Tags:

2

Answers


  1. 0

    It looks like that because of the 3d effect of the input field.
    If you want to remove that 3d effect, just add border-style: solid; to your input css.

    input {
  border-width: thin;
  border-color: lightgray;
  box-shadow: none;
  outline: 0;
  border-style: solid;
}
    <input>
    Login or Signup to reply.
  2. 0

    The default value for border-style on input elements is usually inset. You need to set it to solid.

    Actually it usually makes sense to use the border shorthand and always set width, color and style at the same time:

    border: lightgray thin solid;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search