Как изменить цвет пролета на красный в опции выбора? в js fiddle я хочу изменить цвет <span class="myError">This is a required field.</span> на красный цвет  введите описание изображения здесь

select{
  color: green;
}
select option { color: black; }

select option .myError{
  color:red
}
<select >
 <option value="">Color:
 <span class="myError">This is a required field.</span>
 </option>
 
 <option value="17">Color: Midnight Blue</option>
 
 <option value="18">Color: Radar Red</option>
 
 </select>
1
Ganesh Godshelwar 28 Фев 2018 в 10:40

3 ответа

Лучший ответ

Вот причудливая идея, используя оверлей над select и mix-blend-mode, затем я контролирую изменение цвета, используя CSS varibale.

$('select').change(function(){
   $(this).parent().attr('style','--color:'+$(this).find(':selected').data('color'));
})
.select {
  position: relative;
  display: inline-block;
  --color:red;
}

.select:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 1px;
  bottom: 1px;
  left: 40px;
  background: var(--color);
  mix-blend-mode: lighten;
}

select option {
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
  <select>
 <option value="" disabled selected>Color: This is a required field. </option>
 
 <option value="17" data-color="blue">Color: Midnight Blue</option>
 
 <option value="18" data-color="pink">Color: Radar Red</option>
 
 </select>
</div>
2
Temani Afif 4 Июн 2019 в 10:52

Вы не можете использовать html-тег внутри тега <option>. Однако вы можете добиться этого с помощью CSS:

select{
  color: red;
}
select option { color: black; }

select option:first-child{
  color:red
}

.mid-blue{
  color: #0000CD;
}

.radar-red{
  color: #FF0000;
}
<select >
 <option value="">Color:This is a required field
 </option>
 
 <option class='mid-blue' value="17">Color: Midnight Blue</option>
 
 <option class='radar-red' value="18">Color: Radar Red</option>
 
 </select>
0
Ankit Agarwal 28 Фев 2018 в 07:54

После рендеринга DOM вы можете проверить его элемент, вы увидите, что span будет удален. Вот почему свойства стиля CSS не работают, потому что не существует span или класса .myError.

Другими словами опция tag не может разрешить другие теги.

1
Ayaz Shah 28 Фев 2018 в 07:51