Currently, I am working on my first Django-bootstrap project and dealing with a select box. I am trying to customize it so that when clicked, the border of the select box and its options turns yellow, which is working well. However, there is an additional blue rectangle around the select box when clicked that I do not want.
Below is the code from my Styles.css:
.selector{
position:absolute;
border-radius:1rem;
margin-left:260px;
width:500px;
height:35px;
font-size: 15px;
text-align-last: center;
color:#C9C9C9;
transition-property: none;
}
.selector:focus{
border-color:#FFD700;
box-shadow: 0 0 8px #FFD700;
border-radius:1rem;
overflow:hidden;
}
And here is my HTML Template:
<div class="div1">
<label for="estado" class="label1">
Estado
<select class="selector" id="estado" name="estado" onchange="functionfs()" style="border-color: #C9C9C9;">
<option style="color:#C9C9C9" selected="selected" value="-----">--- Ingrese un valor ---</option>
<option value="Activo" style="color:black;">Activo</option>
<option value="Inactivo" style="color:black;">Inactivo</option>
</select>
</label>
</div>
You can find more details in the attached image.
Appreciate anyone who can provide guidance!