Как изменить цвет опции заполнителя в теге Select? - PullRequest
Новая
       18

Как изменить цвет опции заполнителя в теге Select?

0 голосов
/ 17 сентября 2018

Я пытаюсь изменить цвет первого параметра (Тип бизнеса) в теге выбора на серый, чтобы он выглядел как заполнитель текста для текстового поля.Я попробовал несколько вещей, которые не сработали.Есть ли способ сделать это просто с помощью HTML и CSS? 

    <select id="businesstype">
        <option value="" disabled selected hidden>Business Type</option>
        <option value="">Restaurant</option>
        <option value="">Hotel</option>
        <option value="">Café</option>
        <option value="">Shop</option>
        <option value="">Services Agency</option>
        <option value="">NGO</option>
        <option value="">Institution</option>
    </select>

Ответы [ 4 ]

0 голосов
/ 17 сентября 2018 
option:disabled {
    color: #000;
    font-weight: bold;
}
0 голосов
/ 17 сентября 2018

Вы можете сделать это, просто добавив следующие css, 

#businesstype option[disabled]:first-child {
    color: gray;
}
0 голосов
/ 17 сентября 2018

Цель выберите , чтобы изменить стиль цвета selected.
Затем выберите все параметров из этого , выберите , чтобы сбросить их унаследованный цвет. 

#businesstype {
  color: gray;
}

#businesstype option {
  color: black;
}
<select id="businesstype">
  <option value="" disabled selected hidden>Business Type</option>
  <option value="">Restaurant</option>
  <option value="">Hotel</option>
  <option value="">Café</option>
  <option value="">Shop</option>
  <option value="">Services Agency</option>
  <option value="">NGO</option>
  <option value="">Institution</option>
</select>
0 голосов
/ 17 сентября 2018

Это должно работать: 

#businesstype div[disabled] {
    opacity: 0.5;
}

Также проверить: https://www.w3schools.com/css/css_attribute_selectors.asp

...