Стиль для selectbox CSS и HTML - PullRequest
0 голосов
/ 04 апреля 2020

Кто-то только что помог мне удалить контур моего окна выбора (из моего первого проекта bootstrap - django). Теперь я хотел бы попросить вас о помощи, чтобы изменить свойство цвета границы самого поля параметров, которое синий, и я пытаюсь сделать его желтым. Кроме того, по какой-то причине, когда поле выбора имеет значение по умолчанию, его рамка имеет желтый цвет, но после выбора одного из параметров он становится темнее, и я хотел бы, чтобы он был темнее с самого начала.

Здесь мой 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;
}

и мой 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>

и мой JS:

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

я тоже прикреплю 2 изображения самой проблемы.

enter image description here

Как вы можете видеть, когда я выбираю одно из двух состояний и щелкните его снова, оно станет темнее.

Спасибо всем!

1 Ответ

1 голос
/ 04 апреля 2020

Вот решение вашей более темной и светящейся проблемы:

Класс селектора кода

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

В то время как синяя рамка не может быть изменена, поскольку она отображается операционной системой

Вы можете увидеть здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...