CSS Unremovable extra white border over an outline

user_13294271 0
Viewed 1328

I am experiencing weird behavior of input when it is focused. As you can see through the images below, an extra white border appears whatever its outline-color is.

Input element with extra white border Input element with extra white border even outline-color is blue

I tried setting padding: 0px; and box-shadow: none; too, but still I could not remove it. One thing I realized is that setting outline-style: solid; does the trick, but then I couldn't see rounded corner anymore.

The image below is the same input element which has completely same css rulesets:

Another input element with completely-same CSS

input {
  flex: auto;
  border: 1px solid darkgrey;
  border-radius: 4px;
  background-color: transparent;
  color: white;
  font-size: 42px;
}

input:focus {
  outline-style: auto;
  outline-color: orange;
}

body {
  background-color: #383838;
}
<input>

css html
1 Answers

Don't use the auto value. Use solid instead

input {
  flex: auto;
  border: 1px solid darkgrey;
  border-radius: 4px;
  background-color: transparent;
  color: white;
  font-size: 42px;
}

input:focus {
  outline-style: solid;
  outline-color: orange;
}

body {
  background-color: #383838;
}
<input>

In addition, in CSS3, outline-style accepts the value auto. The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. ref

user_86203330
Related