Color of outline on input field-CodePudding

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 >
    <input  type="number" id="quantity" name="quantity" min="-1" max="100" size="38"> 
</div>

CodePudding user response：

That's controlled by the various outline styles. For instance, to make it green, you can use outline-color: green. You can apply this to all input elements (using the :focus pseudo-class), or to just the type="number" ones if you like. Note that for it to work in Firefox, you have to supply outline-style (it's optional for other browsers). Here's an example:

input[type=number]:focus {
    outline-color: green;
    outline-style: solid;
}

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

CodePudding user response：

it works in ff:

input:focus {
    outline-style: solid;
    outline-color: #f00;
}