jQuery斜体选择问题

Question

我正在尝试将选择框设为斜体，而另一半设为非斜体

所需的样本输出：

我已经尝试了下面的代码，但整个内容都用斜体

$(document).ready(function() {
  $('#mySelect .firstOption').html("<span>NOT ITALIC </span><option>italic</option>");
  $('#mySelect').css('font-style', 'italic');
  $('#mySelect option').css('font-style', 'normal');
  $('#mySelect option span').css('font-style', 'normal');
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<select id="mySelect">
  <option class='firstOption'></option>
  <option>non-italic</option>
  <option>non-italic</option>
</select>

Answer 1

请考虑使用jQuery UI SelectMenu。这样可以进行更多的自定义，并可以进行很多主题设置。例如：

$(function() {
  $("#mySelect").selectmenu();
  $("#mySelect").selectmenu("instance")._renderItem = function(ul, item) {
    var li = $("<li>").html("<div>" + item.label + "</div>");
    console.log("LI Created.", li);
    if (item.element.hasClass("special")) {
      console.log("Special Found.", item.element);
      li.css("font-style", "italic");
    }
    console.log("Appending and Finish.");
    return li.appendTo(ul);
  };
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<select id="mySelect">
  <option>Option 1</option>
  <option class='special'>Option 2</option>
  <option>Option 3</option>
</select>

这将重新创建SelectMenu为<ul>，并且菜单项可以设置为斜体。

更新

如果要格式化占位符，也可以这样做。您将无法使用标准HTML设置占位符的样式。示例：

$(function() {
  $("#mySelect").selectmenu({
    create: function(e, ui) {
      $(".ui-selectmenu-button .ui-selectmenu-text").html($(this).attr("placeholder"));
    }
  });
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<select id="mySelect" placeholder="Select <i>(Student, Teacher, Coach...)</i>">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Answer 2

在您的HTML代码之后，添加此-

  $('#mySelect option:first').css('font-style', 'italic');

这仅使第一个选项italic保持其余选项正常。

CSS方式-

select option:first-child{
  font-style: italic;
}

Answer 3

您可以尝试使用CSS进行其他尝试，但是由于浏览器可以渲染项目，因此可以覆盖样式。另外，您不能在<option>内添加<option>。

$(function() {
  $('#mySelect .firstOption').html("<span>NOT ITALIC </span>italic");
});

option.firstOption {
  font-style: italic;
}

option.firstOption span {
  font-style: normal;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<select id="mySelect">
  <option class='firstOption'></option>
  <option>non-italic</option>
  <option>non-italic</option>
</select>

这就是为什么您的代码无法按预期运行的原因。