I am trying to change the border color of an input, but despite specifying the color, when selecting the input the border is always black. All styles work except the border color when selecting an input. That could be happening? I have used the !important and it doesn't work either.
My code is broader but I will put the summary.
This is the styles and the form that I am using.
form {
display: grid;
grid-template: repeat(5, 1fr) auto auto auto 1fr / 1fr 1fr;
grid-gap: 1rem;
align-items: flex-start;
}
form input,
form select {
margin-top: 0.5rem;
border-radius: 0.25rem;
border: 1px solid #ced4da;
height: 2.125rem;
font-size: 1rem;
padding-left: 0.5rem;
color: #495057;
}
form input:hover {
box-shadow: 0 0 5px gray;
}
form input:focus {
box-shadow: 0 0 5px #3786da;
border: 1px solid #30567e;
}
<form>
<div className="prestamo">
<label htmlFor="prestamo">Monto del préstamo*</label>
<input type="number" name="prestamo" id="prestamo" min="0" defaultValue={this.state.prestamo} onChange={this.handlePrestamo} required />
</div>
<div className="plazo">
<label htmlFor="plazo">Plazo*</label>
<input type="number" name="plazo" id="plazo" min="1" step="1" defaultValue={this.state.plazo} onChange={this.handlePlazo} required />
<div className="radiolabels">
<label htmlFor="unidad">Unidad: </label>
<input type="radio" name="unidad" id="meses" value="meses" onClick={this.handleUnidadPlazo} />
<label htmlFor="meses">Meses</label>
<input type="radio" name="unidad" id="años" value="años" onClick={this.handleUnidadPlazo} />
<label htmlFor="años">Años</label>
</div>
</div>
It's easy, you must remove the outline with CSS, I leave you an example