Я бы хотел, чтобы у первого ребенка в опции был другой размер шрифта. Пробую разные методы, но этого не происходит. Пока что у меня есть это:

JSFiddle: https://jsfiddle.net/2n9cfyo0/1/

Я хочу, чтобы по умолчанию он выглядел так (это первый ребенок):

enter image description here

Но измените размер шрифта на 24 пикселя, когда выбрано раскрывающееся меню:

enter image description here

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 7px 15px;
  border: 1px solid #333;
  border-radius: 2px;
  font-size: 24px;
}

.target option:first-child {
  font-size: 12;
}
<select class="target">
  <option value="">select</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
</select>
-1
Elaine Byene 14 Окт 2019 в 20:24

1 ответ

Лучший ответ

Я создал jsfiddle для достижения того же результата, который требуется. Для достижения ожидаемого результата потребуется javascript и jquery. Изменение раскрывающегося списка с одной формы на другую является событием , а события существуют в Jquery, в вашем случае мы используем событие .change().

Добавьте приведенный ниже код javascript:

$(".target").change(function(){
   if (this.value == "2") {
     $(this).css({"font-size" : "34px"});
   }
});

В приведенном выше коде говорится, что когда вы выбираете Option 2 из раскрывающегося списка, размер шрифта изменяется на 34px;, вы можете изменить скрипку в соответствии с вашими потребностями :)

$(".target").change(function() {
  if (this.value == "2") {
    $(this).css({
      "font-size": "34px"
    });
  }
});
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 7px 15px;
  border: 1px solid #333;
  border-radius: 2px;
  font-size: 24px;
}

.target option:first-child {
  font-size: 12;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="target">
  <option value="">select</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
</select>
2
mplungjan 15 Окт 2019 в 08:09