Recently, someone assisted me in removing the outline of my select box in my debut bootstrap-django project. Now, I am seeking your guidance on altering the border color property of the options box itself from blue to yellow. Strangely, when the select box defaults to its initial value, the border appears yellow, but upon selecting an option, it darkens. My goal is to have the border remain a darker shade from the outset.
Below is the CSS in question:
.selector{
outline:none;
position:absolute;
border-radius:1rem;
margin-left:260px;
width:500px;
border-color: #C9C9C9;
height:35px;
font-size: 15px;
text-align-last: center;
color:#C9C9C9;
}
.selector:focus{
border-color:#FFD700;
box-shadow: 0 0 8px #FFD700;
}
Accompanying HTML code:
<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:black" 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>
JavaScript snippet for reference:
<script type="text/javascript">
var selector = document.getElementById("estado");
function functionfs(valor) {
selector.setAttribute("style", "color:black;");
}
</script>
I have included two images illustrating the issue:
https://i.sstatic.net/OmFwt.png
https://i.sstatic.net/GIsez.png
If you examine the screenshots, you'll notice that selecting a state and clicking on it again causes it to darken. Your assistance is greatly appreciated!
Thank you all for your help!