Изменить размер шрифта в зависимости от выбранной опции

Question

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

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

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

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

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>

Answer 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>