8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何设置 HTML 选择元素的选项样式?

Mohammad Ali Nekouie 1月前

71 0

这是我的 HTML:可能是必要的,例如出于角度验证或其他原因。

  • @none 我已经发布了对“设置选项标签样式”的回答。它没有展示如何设置样式

  • 在移动设备的引入中,这甚至更难设计,因为选项元素甚至没有相对于页面流中的选择显示 - 它在屏幕底部的单独可滚动部分列出 - 样式与您在传统浏览器中的预期非常不同。

  • 无法确定样式(选项只有小问题)。请查看 w3schools 提供的此操作指南,仅使用 JS 即可完全自定义它:w3schools.com/howto/howto_custom_select.asp,这样您就可以

  • 不,这是不可能的,因为这些元素的样式是由用户的操作系统处理的。MSDN 将在这里回答您的问题 :

    background-color 和 之外 color ,通过选项元素的样式对象应用的样式设置将被忽略。

  • 补充一下 devios 的观点——原生 select 可以为 Windows 进行最低限度的样式设置,但不一定适用于其他操作系统。正如 pumbo 在下面提到的,您需要将 select 换成其他元素(通常是 ul),并在 JavaScript 中复制 select 功能,才能完全控制样式。

  • style=\'background-color: red;color: red;\' 对我来说不起作用。编辑:关闭开发人员控制台后,样式已应用。

  • 引用 12

    您可以在某种程度上对选项元素进行样式设置。

    使用 * CSS 选择器,您可以设置系统绘制的框内的选项样式。

    例子:

    #ddlProducts *
    {
     border-radius: 15px;
     background-color: red;
    }
    

    看起来会像这样:

    enter image description here

  • 这仅仅是因为所有选择器都以影子 DOM 内部为目标,您可以根据浏览器手动定位它们。

  • 引用 14

    我发现并使用了这个选择和选项样式的很好的例子。你可以用这个选择来做你想做的一切。这是 小提琴

    // Iterate over each select element
    $('select').each(function() {
    
      // Cache the number of options
      var $this = $(this),
        numberOfOptions = $(this).children('option').length;
    
      // Hides the select element
      $this.addClass('s-hidden');
    
      // Wrap the select element in a div
      $this.wrap('<div class="select"></div>');
    
      // Insert a styled div to sit over the top of the hidden select element
      $this.after('<div class="styledSelect"></div>');
    
      // Cache the styled div
      var $styledSelect = $this.next('div.styledSelect');
    
      // Show the first select option in the styled div
      $styledSelect.text($this.children('option').eq(0).text());
    
      // Insert an unordered list after the styled div and also cache the list
      var $list = $('<ul />', {
        'class': 'options'
      }).insertAfter($styledSelect);
    
      // Insert a list item into the unordered list for each select option
      for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
          text: $this.children('option').eq(i).text(),
          rel: $this.children('option').eq(i).val()
        }).appendTo($list);
      }
    
      // Cache the list items
      var $listItems = $list.children('li');
    
      // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
      $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.styledSelect.active').each(function() {
          $(this).removeClass('active').next('ul.options').hide();
        });
        $(this).toggleClass('active').next('ul.options').toggle();
      });
    
      // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
      // Updates the select element to have the value of the equivalent option
      $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        /* alert($this.val()); Uncomment this for demonstration! */
      });
    
      // Hides the unordered list when clicking outside of it
      $(document).click(function() {
        $styledSelect.removeClass('active');
        $list.hide();
      });
    
    });
    body {
      padding: 50px;
      background-color: white;
    }
    
    .s-hidden {
      visibility: hidden;
      padding-right: 10px;
    }
    
    .select {
      cursor: pointer;
      display: inline-block;
      position: relative;
      font: normal 11px/22px Arial, Sans-Serif;
      color: black;
      border: 1px solid #ccc;
    }
    
    .styledSelect {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: white;
      padding: 0 10px;
      font-weight: bold;
    }
    
    .styledSelect:after {
      content: "";
      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-color: black transparent transparent transparent;
      position: absolute;
      top: 9px;
      right: 6px;
    }
    
    .styledSelect:active,
    .styledSelect.active {
      background-color: #eee;
    }
    
    .options {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      z-index: 999;
      margin: 0 0;
      padding: 0 0;
      list-style: none;
      border: 1px solid #ccc;
      background-color: white;
      -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    
    .options li {
      padding: 0 6px;
      margin: 0 0;
      padding: 0 10px;
    }
    
    .options li:hover {
      background-color: #39f;
      color: white;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <select id="selectbox1">
      <option value="">Select an option&hellip;</option>
      <option value="aye">Aye</option>
      <option value="eh">Eh</option>
      <option value="ooh">Ooh</option>
      <option value="whoop">Whoop</option>
    </select>
    <select id="selectbox2">
      <option value="">Month&hellip;</option>
      <option value="january">January</option>
      <option value="february">February</option>
      <option value="march">March</option>
      <option value="april">April</option>
      <option value="may">May</option>
      <option value="june">June</option>
      <option value="july">July</option>
      <option value="august">August</option>
      <option value="september">September</option>
      <option value="october">October</option>
      <option value="november">November</option>
      <option value="december">December</option>
    </select>
  • 这是一种非常动态的方式来做你想做的事情,如果你有更好的选择,我会很高兴在这里看到它作为答案@ahnbizcad

  • 这不是原生 html,

  • 哇。即使操作系统能够正常工作,为了弥补让操作系统负责选项元素的错误决定,也需要做很多工作。

  • ,这里有一些设置样式的方法 <option> <select> 我知道这不是原始发帖人所问的,但我认为我可以帮助其他偶然发现这个问题的人。

    您仍然可以实现单独设置每个样式的目标 <option> ,但可能还需要对它们应用一些样式 <select> 。我最喜欢的是下面提到的“Bootstrap Select”库。


    Bootstrap 选择库 (jquery)

    如果您已经在使用 bootstrap,您可以尝试 Bootstrap Select library 或下面的库(因为它有一个 bootstrap 主题)。

    请注意,您可以设置整个 select 元素的样式,也可以 option 单独设置元素的样式。

    例如

    enter image description here

    enter image description here

    enter image description here

    依赖项 :需要 jQuery v1.9.1+、 Bootstrap 、Bootstrap 的 dropdown.js 组件和 Bootstrap 的 CSS

    兼容性 :不确定,但 bootstrap 表示它“支持所有主流浏览器和平台的最新、稳定版本”

    演示 https://developer.snapappointments.com/bootstrap-select/examples/

    .special {
      font-weight: bold !important;
      color: #fff !important;
      background: #bc0000 !important;
      text-transform: uppercase;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
    
    <select class="selectpicker">
      <option>Mustard</option>
      <option class="special">Ketchup</option>
      <option style="background: #5cb85c; color: #fff;">Relish</option>
    </select>

    Select2 (JS 库)

    您可以使用一个名为 Select2 的 .

    select2

    依赖项 :库仅为 JS + CSS + HTML(不需要 JQuery)。

    兼容性 :IE 8+、Chrome 8+、Firefox 10+、Safari 3+、Opera 10.6+

    演示 https://select2.org/getting-started/basic-usage

    还有 引导主题

    没有 Bootstrap 示例:

    $(function() {
      var $select = $('.select2');
      
      $select.select2({
        theme: 'paper'
      });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
    
    <select class="select2 form-control" placeholder="Country">
      <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
      </optgroup>
      <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
      </optgroup>
    </select>

    引导示例:

    $(function() {
      var $select = $('.select2');
      
      $select.select2({
        theme: 'paper'
      });
    });
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
    
    <select class="select2 form-control" placeholder="Country">
      <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
      </optgroup>
      <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
      </optgroup>
    </select>

    MDBootstrap($&Bootstrap&JQuery)

    如果你有多余的钱,你可以使用高级库 MDBootstrap 。(这是一个 完整的 UI 套件 ,所以它并不轻量)

    这使您可以使用 Material Design .

    enter image description here

    有一个免费版本,但它不允许您使用漂亮的 Material 设计!

    依赖项 Bootstrap 4 、JQuery、

    兼容性 “支持所有主流浏览器和平台的最新、稳定版本。”

    演示 https://mdbootstrap.com/docs/jquery/forms/select/#color

  • 这个答案具有误导性,因为虽然您明确表明您可以设置选择的样式,但您声称选项是可以设置样式的,即使它是一个仅接受最少 CSS 样式的操作系统元素。

  • 引用 20

    @Jsalinas 抱歉,我之前的回答太糟糕了。我已将其替换为一个希望更好的答案。

  • 返回
    作者最近主题: