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