Changing the colour of the grey "border" on input[type=text]

user_4601149 0
Viewed 734

Is it possible to change the colour of the grey "border" around a text input without changing the border thickness using CSS?

I initially thought that using border-color would allow me to change the colour, however, as seen in the image / code example below, changing the colour also appears to make the border thicker. I would like to keep the default width (2px) but change the colour of the border.

The image is a zoomed in screenshot of the code snippet below to highlight the apparent change in border thickness when the colour is changed.

enter image description here

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
}

input[type=text] {
  flex: 1 1 0;
  margin-bottom: 2px;
}

.different_color {
  border-color: red;
}
<div class="container">
  <input type="text">
  <input type="text" class="different_color">
</div>

Edit

To clarify, the default border, which according to the developer console has a border-width of 2px appears to be rendered as only part of the 2px whilst still essentially padding the content in by a fixed 2px. However, when I set a colour on the border, it no longer renders only this small part, but the whole 2px. The image below shows this with the left side of the image being the default border and the right side of the image being the border with the border-color set to red.

enter image description here

css html
3 Answers

Changing the border-color will not change the border-width per se.

But you might have noticed that form elements by default looks different on MacOS than on Windows 10. That is because unstyled form elements are rendered using platform native styling. If you inspect an unstyled <input> in Chrome or Firefox and view the browser applied rulesets, you will see the input has -webkit-appearance: textfield or -moz-appearance: textfield respectively. This makes the browser apply these platform specific styles which will override even the browser defaults.

(In Firefox you can play around with the appearance property and make a <div> render as a native styled input element and make a <span> look like a button by adding the appearance property like the following snippet demonstrates)

div {
  display: block;
  width: 100px;
  height: 20px;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
span {
  display: block;
  width: 100px;
  height: 20px;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<div></div>
<span></span>

What happens once you start styling a form element is that the appearance ruleset will be removed and the browser will apply the browser defaults instead. As for the input element, it has border-style: inset and border-width: 2px by default in Chrome. That is what you are seeing. That is why the width and style changes once you change the color. And that is why you can't just change the border color.

You will have to manually "style your way back" to simulate the platform native form element.

user_23115590

As @sergiu reznicencu said,

it seems that setting the color also resets the width.

By setting the color it resets to 2.

Different browsers also seem to show different values for browser width. Some say 1px and some 2px while border is actually less than 1px wide.

Default value, according to W3schools and Mozilla developers, initial (default value) is medium. If you do set a border with border-width: medium, it will be thicker than default one.

input {
  width: 100%;
  margin-bottom: 5px;
}

.custom-clr-only {
  border-color: red;
}

.custom {
  border: medium solid green;
}
<input type="text">
<input type="text" class="custom-clr-only">
<input type="text" class="custom">

user_108920740

You also have to specify the border style : 

.specialborder{
    border: 1px solid red;
}

ImageWIthBorderStyle

user_130872520
Related