[SOLVED] Color of outline on input field

Color of outline on input field

So I have input type="number" elements and when you click in the field, there is a blue glow/border appearing Is it possible to change this to another color?

I am aware I can change the background or arrows and such, but I am unsure if I can change the default blue color when you click in the field.

<div class="b">
    <input class="number" type="number" id="quantity" name="quantity" min="-1" max="100" size="38"> 
</div>

Solution

That's controlled by a combination of outline- and border- properties, and it appears to be slightly different across browsers. As far as I can tell, to get a reliable effect across browsers, you have to take complete control of both the outline and the border.

For example, here's one way to do it, by completely turning off any outlining and taking control of the border both with and without focus:

input[type=number] {
    border: 2px solid gray;
    border-radius: 2px;
    outline: none;
}
input[type=number]:focus {
    border-color: orange;
}

<div class="b">
    <input class="number" type="number" id="quantity" name="quantity" min="-1" max="100" size="38">
</div>

As of this edit in 2025, that works on Chromium-based browsers (Chrome, Vivaldi, Edge, ...), Firefox, and iOS Safari.

Note that's just one approach. You could also completely disable the border and use an outline, if you want the box offset a bit.