CODEWITHSUNDEEP
javascripthtmlcssdjangobootstrap-4
Jacobo Henao
Jacobo Henao

Reputation: 47

Style for a selectbox CSS and HTML

Somebody just helped me to remove the outline of my selectbox (from my first bootstrap-django project) Now, i wanted to ask for your help to change the border color property of the options box itself, which is blue, and i'm trying to make it yellow. Also, for some reason when the select box has the default value, its border is yellow but after you select one of the options, it becomes darker, and i would like it to be darker from the beggining.

Here is my CSS:

.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;
}

And my HTML:

<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>

And my JS:

<script type="text/javascript">
  var selector = document.getElementById("estado");
  function functionfs(valor) {
    selector.setAttribute("style", "color:black;");
  }
</script>

I will also attach 2 images of the problem itself.

enter image description here

As you can see, when i select one of the two states and click it again, it becomes darker.

Thanks everyone!

Upvotes: 1

Views: 86

Answers (1)

Fareed Khan
Fareed Khan

Reputation: 2923

Here is the solution of your darker and glowing problem:

Code selector class

  . selector {
    outline: none;
    position: absolute;
    border-radius: 1rem;
    margin-left: 260px;
    width: 500px;
    height: 35px;
    font-size: 15px;
    text-align-last: center;
    color: #000000;
    border-color: #FFD700 !important;
    box-shadow: 0 0 8px #FFD700;
}

While blue border cannot be changed as it is render by operating system

You can see here

Upvotes: 1

Related Questions