如何样式的html“选择”元素的选项?

这是我的HTML:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

我想让产品的名称(即。'Product1'， 'Product2'，等等)，以及它的类别(即。电子，体育等)斜体，只使用CSS。我发现了一个老问题，提到这是不可能使用HTML和CSS，但希望，现在有一个解决方案。

当前回答

似乎我可以直接在Chrome或Firefox中为选择设置CSS。CSS和HTML代码提供如下:

. boldoption { font-weight: bold; 的选择< > <option>一些规范-字体 <option>另一种规范-字体option</option> <option class=“boldoption”>一些勇敢的选择</option> 选择< - >

2016-04-28 12:24:04

其他回答

似乎我可以直接在Chrome或Firefox中为选择设置CSS。CSS和HTML代码提供如下:

. boldoption { font-weight: bold; 的选择< > <option>一些规范-字体 <option>另一种规范-字体option</option> <option class=“boldoption”>一些勇敢的选择</option> 选择< - >

2016-04-28 12:24:04

这里有一些方法来样式<option>和<select>如果你使用Bootstrap和/或jquery。我知道这不是最初的海报要问的问题，但我想我可以帮助其他无意中遇到这个问题的人。

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

Bootstrap选择库(jquery)

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

注意，您可以对整个选择元素或选项元素分别设置样式。

例子:

依赖:需要jQuery v1.9.1+， Bootstrap, Bootstrap的下拉菜单.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/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/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 lib)

你可以使用一个叫做Select2的库。

依赖:库是JS + CSS + HTML(不需要JQuery)。

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

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

还有一个引导主题可用。

无引导的例子:

$(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工具包，所以它不轻)

这允许您使用材质设计来设置选择和选项元素的样式。

有一个免费的版本，但它不允许你使用漂亮的材质设计!

依赖:Bootstrap 4, JQuery，

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

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

2015-02-11 23:55:35

(() => { const optionValues = document.querySelectorAll(".search-form__value"); const searchOptions = document.querySelector(".search-form__selector"); const dropdown = document.querySelector(".search-form__dropdown"); const input = document.getElementById("search-form-loc"); const selectorText = document.querySelector(".search-form__label--loc"); searchOptions.addEventListener("click", function () { dropdownHandler(); }); optionValues.forEach((option) => { option.addEventListener("click", function () { updateUI(input, selectorText, this); }); }); window.addEventListener("mouseup", function (event) { if (event.target != dropdown) { dropdown.classList.remove("search-form__dropdown--show"); } }); function dropdownHandler() { dropdown.classList.toggle("search-form__dropdown--show"); } function updateUI(input, selectorText, referedThis) { input.value = referedThis.textContent.trim(); selectorText.textContent = referedThis.textContent.trim(); dropdown.classList.remove("search-form__dropdown--show"); } })(); /* CSS Reset Starts */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; color: #777; background-color: slateblue !important; } /* CSS Reset Ends */ .search-form { display: flex; align-items: center; width: max-content; max-width: 700px; margin: 100px auto; background: #fff; } .search-form__label { margin-right: 40px; } .search-form__selector { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; padding: 12px 18px; background: #fff; position: relative; z-index: 1000; } .search-form__line { height: 100%; width: 1px; background: #777; margin-left: auto; } .search-form__icon { font-size: 24px; } /* Dropdown */ .search-form__dropdown { list-style: none; position: absolute; left: 0; top: 100%; box-shadow: 0 7px 30px -10px #96aa6480; width: 100%; min-width: max-content; transition: 0.4s; background-color: #fff; opacity: 0; visibility: hidden; z-index: 10; pointer-events: none; transform: translateY(20px); cursor: pointer; } .search-form__value { padding: 7px; } .search-form__value:hover { background: #0667d5; color: #fff; } .pos-rel { position: relative; } .search-form__dropdown--show { opacity: 1; visibility: visible; pointer-events: visible; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> </head> <body> <form class="search-form"> <input type="hidden" name="search-form-loc" id="search-form-loc" /> <div class="pos-rel"> <div class="search-form__selector"> <p class="search-form__label search-form__label--loc">Select From List</p> <div class="search-form__line"> </div> <i class="fa fa-caret-down search-form__icon"></i> </div> <ul class="search-form__dropdown"> <li class="search-form__value" data-loc="search-form-loc">UK</li> <li class="search-form__value" data-loc="search-form-loc">Barcelona</li> <li class="search-form__value" data-loc="search-form-loc">Brazil</li> <li class="search-form__value" data-loc="search-form-loc">Hungary</li> </ul> </div> </form> </body> </html>

2022-02-22 16:58:05

它肯定会起作用。选择选项是由OS而不是html呈现的。这就是为什么CSS样式没有效果，..一般选项{font-size: value; background - color: colorCode; border - radius:价值;｝这将工作，但我们不能自定义填充，边距等。

下面的代码100%工作自定义选择标记从这个例子

var x, i, j, selElmnt, a, b, c; /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("custom-select"); for (i = 0; i < x.length; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < selElmnt.length; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /*when an item is clicked, update the original select box, and the selected item:*/ var y, i, k, s, h; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; h = this.parentNode.previousSibling; for (i = 0; i < s.length; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); for (k = 0; k < y.length; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); for (i = 0; i < y.length; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < x.length; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect); /*the container must be positioned relative:*/ .custom-select { position: relative; font-family: Arial; } .custom-select select { display: none; /*hide original SELECT element:*/ } .select-selected { background-color: DodgerBlue; } /*style the arrow inside the select element:*/ .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /*point the arrow upwards when the select box is open (active):*/ .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /*style the items (options), including the selected item:*/ .select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; } /*style items (options):*/ .select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /*hide the items when the select box is closed:*/ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } <div class="custom-select" style="width:200px;"> <select> <option value="0">Select car:</option> <option value="1">Audi</option> <option value="2">BMW</option> <option value="3">Citroen</option> <option value="4">Ford</option> <option value="5">Honda</option> <option value="6">Jaguar</option> <option value="7">Land Rover</option> <option value="8">Mercedes</option> <option value="9">Mini</option> <option value="10">Nissan</option> <option value="11">Toyota</option> <option value="12">Volvo</option> </select> </div>

2018-10-20 07:26:16

这里留下一个快速的替代方法，使用表上的类切换。它的行为与选择非常相似，但是可以使用过渡、滤镜和颜色进行样式化，每个子元素都是独立的。

2018-05-16 04:18:36

如何样式的html“选择”元素的选项?

推荐文章

最新文章

标签