这是我的HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
我想让产品的名称(即。'Product1'， 'Product2'，等等)，以及它的类别(即。电子，体育等)斜体，只使用CSS。我发现了一个老问题，提到这是不可能使用HTML和CSS，但希望，现在有一个解决方案。
当前回答
您可以在某种程度上设置选项元素的样式。
使用* CSS选择器，您可以在系统绘制的框内设置选项的样式。
例子:
#ddlProducts *
{
border-radius: 15px;
background-color: red;
}
它看起来是这样的:
其他回答
即使没有太多的属性要改变，但你可以实现以下样式只有css:
.options { 边框:1px solid #e5e5e5; 填充:10 px; ｝ 选择{ 字体大小:14 px; 边界:没有; 宽度:100%; 背景:白色; ｝ < div class = "选项”> <选择> 苹果<选项值= " " > < /选项> 香蕉<选项值= " " > < /选项> 橙色<选项值= " " > < /选项> 芒果<选项值= " " > < /选项> < /选择> < / div >
实际上你可以添加:before和:after并设置样式。至少它是有意义的
选择{ 字体大小:18 px; background - color: # ffffff; ｝ 之前选择:{ 内容:“>”; 字体大小:20 px; 显示:没有; padding-right: 10 px; padding-left: 5 px; 颜色:# fff; ｝ 选择:徘徊:{之前 显示:内联; ｝ <select id="ddlProducts" name="ddProducts"> <option>Product1: Electronics </option> <option>Product2: Sports </option> < /选择>
(() => { 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>
可以应用于<option>元素的样式属性很少。
这是因为这种类型的元素是一个“替换元素”的例子。它们依赖于操作系统，不是HTML/浏览器的一部分。它不能通过CSS样式。
有一些替换的插件/库看起来像<select>，但实际上是由常规的HTML元素组成的，可以设置样式。
Bootstrap允许你通过data-content使用样式:
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
例子: https://silviomoreto.github.io/bootstrap-select/examples/
