Как я могу изменить цвет текста после выбора одной из опций меню выбора с помощью css? - PullRequest
Новая
       5

Как я могу изменить цвет текста после выбора одной из опций меню выбора с помощью css?

0 голосов
/ 05 июля 2019

У меня есть регистрация на веб-сайте с html-меню выбора, из которого можно выбирать, будь то г-н или миссис. Цвет текста серый, и я хочу, чтобы он был черным после выбора одного из вариантов, как это бывает с обычными полями ввода.

Я пробовал это с .anrede: focus (работает для полей ввода), но он снова становится серым после выбора следующего поля ввода 

            <div>
                <select id="anrede" class="anrede">
                    <option hidden>Anrede</option>
                    <option value="f">Frau</option>
                    <option value="m">Herr</option>
                </select>
            </div>
            <!--Vorname-->
            <div><input id="vname" type="text" class="input" placeholder="Vorname"></div>

.input{
border: 2px solid #AD974F;
border-radius: 4px;
margin-top: 15px;

} 

.input:focus{
border: 2px solid #8E793E;

Я хочу решить эту проблему с помощью CSS, если это возможно, но пока не могу найти никакого решения.

1 Ответ

0 голосов
/ 05 июля 2019

Вы можете просто добавить jQuery в свой проект, например так: 

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/
     jquery/3.4.1/jquery.min.js"></script>
</head>

Затем просто используйте фрагмент ниже внутри тегов <script></script> внизу вашего HTML-файла.

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

$( document ).ready(function() {
   $("#anrede").change(function(){
    // the code in here will be called if an option is selected

    // This line will change the options text-color to be whatever color you 
    // provide
    $(this).find('option').css('text-color', '#8E793E');
   });
});

Бонус: 

$( document ).ready(function() {
  $("#anrede").change(function(){
  //If you want to change the color based on what option was selected you can 
  get them based on their id's and handle them accordingly 
  // EX: 
  var id = $(this).find("option:selected").attr("id");

  switch (id){
   case "Anrede":
   // Change the color for the Anrede option
   $(this).find(id).css('text-color', '#8E793E');
   break;
   .... // Add cases for each possible ID if needed
  }
 });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...