根据所选选项更改字体大小

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>