Как стилизовать опцию "Отключено" в форме

Ответ 1

Что вы ищете:

select option:disabled {
    color: #000;
    font-weight: bold;
}

Здесь есть скрипка.

Внимание: согласно отчетам в разделе комментариев, это решение не работает на OS X.

Ответ 2

Я не думаю, что вы можете настроить таргетинг на тег option, используя чистый CSS; вы можете изменить только тег select.

• Усилить изменение тега select.
• Те же усилия по изменению тега option.

Однако существуют обходные пути. См. этот вопрос.

Ответ 3

<select>
    <option value="volvo" >Volvo</option>
    <option value="saab">Saab</option>
    <option value="vw" disabled>VW</option>
    <option value="audi" class="colr">Audi</option>
    <option value="aaa">Something</option>
    <option value="ccc">Other</option>
    <option value="vw" disabled>VW</option>
    <option value="vvv">Apple</option>
    <option value="nnn" class="colr">Mango</option>
    <option value="cmmmcc">Plum</option>
</select>

option:disabled {
   background: #ccc;
   width: 500px;
   padding: 5px;
   }

option.colr {
   background: red;
   width: 500px;
   padding: 5px;
   }

Проверить ссылку http://jsfiddle.net/W5B5p/110/

Ответ 4

Я использовал : неверно, чтобы решить мою проблему, описание ниже:

Таким образом, эти ответы делают стиль отключенной опции, но только в раскрывающемся списке. Нет, если вы хотите отобразить отключенную опцию в верхней части списка как "Пожалуйста, выберите".

Надеюсь, что это помогает другим людям, имеющим схожую проблему с тем, что у меня было.

По сути, выбор должен быть обязательным полем, чтобы это работало:

<select required>

Предполагая, что опция находится вверху списка:

<option disabled selected value="">Please select</option>

И ваш SCSS выглядит примерно так:

select {

  // The select element is set to required
  // as long as the selected options value
  // is empty the element is not valid.
  &:invalid {
    color: gray;
  }

  // Styling for browsers which do support
  // styling select option elements directly
  [disabled] {
    color: gray;
  }

  option {
    color: black;
  }
}

Так что это: invalid, который позволяет нам окрашивать отключенную выбранную опцию.

Спасибо Маркусу Оберленеру за его пост:

Сообщение в блоге: https://markus.oberlehner.net/blog/faking-a-placeholder-in-a-html-select-form-field/

Codepen: https://codepen.io/maoberlehner/pen/WOWrqO

Ответ 5

Я использовал простой хак, чтобы сделать отключенные опции серыми, надеюсь, кто-то найдет это полезным.

<label>
    <div id="disabledMask"></div>
    <select id="mySelect">
        <option disabled selected>Please Select</option>
        <option value="foo">Bar</option>
    </select>
</label>

<style>
    label {
        position: relative;
    }

    #disabledMask {
        position: absolute;
        background-color: #fff;
        opacity: 0.5;
        pointer-events: none;
        width: 100%;
        height: 100%;
        display: none;
    }
</style>

<script>
    var toggleMask = function(){
        var option = this.options[this.selectedIndex];
        var disabledMask = document.getElementById('disabledMask');
        disabledMask.style.display = option.disabled? 'block' : 'none';
    };

    var mySelect = document.getElementById('mySelect');
    mySelect.addEventListener('change', toggleMask);
    toggleMask.bind(mySelect)();
</script>

Вот jsfiddle: https://jsfiddle.net/jhavbzcx/

Отказ от ответственности: в зависимости от стиля вашего выбора вам может понадобиться стилизовать #disabledMask, чтобы не перекрывать стрелку раскрывающегося списка.

Ответ 6

var select = document.getElementsByTagName("select");

for(var i = 0;i < select.length; i++)
{
var el = select[i];
var optVal = el.options[el.selectedIndex].value
el.addEventListener('change', function () {
// Using an if statement to check the class
    if (optVal == "") {
        el.classList.remove('not_chosen');
    } else {
        el.classList.add('not_chosen');
    }
});
}

Ответ 7

<select class="dropdown" name="contactMethod">
<option selected disabled>Contact method:</option>
<option class="dropdownplus"> E-mail: </option>
<option class="dropdownplus"> Website </option>
<option class="dropdownplus"> None</option>
</select>

<style>
.dropdown {
  background-color: rgba(195, 0, 97, 0.1);
  width: 100%;
  border: 1px solid #CC0061;
  border-style: inset;
  color: grey;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  }

option.dropdownplus {
  color: black;
}
</style>

См. img https://ibb.co/d9453b