8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. 如何设置 HTML 选择元素的选项样式？

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

Mohammad Ali Nekouie 1月前
71 0

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

  • 引用 5楼

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

  • 引用 6楼

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

  • 引用 7楼

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

  • 引用 8楼

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

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

  • 引用 9楼

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

  • 引用 10楼
  • 引用 11楼

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

  • 引用 12楼

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

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

    例子： 

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

    看起来会像这样：

    enter image description here

  • 引用 13楼

    这仅仅是因为所有选择器都以影子 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>
  • 引用 15楼

    这是一种非常动态的方式来做你想做的事情，如果你有更好的选择，我会很高兴在这里看到它作为答案@ahnbizcad

  • 引用 16楼

    这不是原生 html，

  • 引用 17楼

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

  • 引用 18楼

    ，这里有一些设置样式的方法 <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

  • 引用 19楼

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

  • 引用 20楼

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

    • 返回
    作者最近主题：