如何为select标签内特定选中<option>设置斜体样式？

原生<option>标签的样式支持非常有限，大部分浏览器不会单独渲染单个option的字体样式，所以直接给Edit status这个option加font-style: italic是无效的。不过可以用jQuery通过动态切换<select>标签的样式来实现需求：

具体实现方式：

• 先给默认选项加个唯一标识，比如data-default="true"，方便后续判断
• 通过jQuery监听select的初始化状态和change事件，当选中的是默认选项时，给select添加斜体样式；选中其他选项时移除斜体样式

完整代码示例：

<select class="cursor-pointer min-w-[160px] custom-black rounded-sm border border-[#d6dce2] focus:outline-none focus:ring-0 focus:border-[#d6dce2] font-bold px-4 text-sm py-2.5" id="statusSelect">
  <option selected disabled hidden data-default="true">Edit status</option>
  <option value="1">Status1</option>
  <option value="2">Status2</option>
  <option value="3">Status3</option>
  <option value="4">Status4</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // 初始化时检查并设置样式
  toggleItalic();
  
  // 监听select的切换事件
  $('#statusSelect').on('change', function() {
    toggleItalic();
  });
  
  // 封装切换斜体样式的逻辑
  function toggleItalic() {
    const $select = $('#statusSelect');
    const isDefaultOption = $select.find('option:selected').data('default');
    $select.css('font-style', isDefaultOption ? 'italic' : 'normal');
  }
});
</script>

原理说明：
因为默认选项是hidden且disabled的，只有未选择其他选项时才会显示它的文本。通过判断当前选中项是否为这个默认选项，动态给select设置font-style，就能实现只有默认文本显示斜体，其他选项保持正常字体的效果。

内容的提问来源于stack exchange，提问作者Vsevolod