这是我的HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
我想让产品的名称(即。'Product1'， 'Product2'，等等)，以及它的类别(即。电子，体育等)斜体，只使用CSS。我发现了一个老问题，提到这是不可能使用HTML和CSS，但希望，现在有一个解决方案。
当前回答
一些属性可以为<option>标签设置样式:
字体类型 颜色 字体- * 背景颜色
此外，您可以使用自定义字体的个人<选项>标签，例如任何谷歌字体，材质图标或其他图标字体从icomoon或类似。(这可能会方便字体选择器等)
考虑到这一点，您可以创建字体家族堆栈，并在<option>标记中插入图标，例如。
<select>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">a ★★★</option>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">b ★★★★</option>
</select>
★取自Icons，其余取自Roboto。
注意，自定义字体并不适用于移动选择。
其他回答
即使没有太多的属性要改变，但你可以实现以下样式只有css:
.options { 边框:1px solid #e5e5e5; 填充:10 px; ｝ 选择{ 字体大小:14 px; 边界:没有; 宽度:100%; 背景:白色; ｝ < div class = "选项”> <选择> 苹果<选项值= " " > < /选项> 香蕉<选项值= " " > < /选项> 橙色<选项值= " " > < /选项> 芒果<选项值= " " > < /选项> < /选择> < / div >
这就是你要找的东西吗?我用jQuery做的!
运行代码片段
$(".custom-select").each(function() { var classes = $(this).attr("class"), id = $(this).attr("id"), name = $(this).attr("name"); var template = '<div class="' + classes + '">'; template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>'; template += '<div class="custom-options">'; $(this).find("option").each(function() { template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>'; }); template += '</div></div>'; $(this).wrap('<div class="custom-select-wrapper"></div>'); $(this).hide(); $(this).after(template); }); $(".custom-option:first-of-type").hover(function() { $(this).parents(".custom-options").addClass("option-hover"); }, function() { $(this).parents(".custom-options").removeClass("option-hover"); }); $(".custom-select-trigger").on("click", function() { $('html').one('click',function() { $(".custom-select").removeClass("opened"); }); $(this).parents(".custom-select").toggleClass("opened"); event.stopPropagation(); }); $(".custom-option").on("click", function() { $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value")); $(this).parents(".custom-options").find(".custom-option").removeClass("selection"); $(this).addClass("selection"); $(this).parents(".custom-select").removeClass("opened"); $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text()); }); body { font-family: 'Roboto', sans-serif; } .custom-select-wrapper { position: relative; display: inline-block; user-select: none; } .custom-select-wrapper select { display: none; } .custom-select { position: relative; display: inline-block; } .custom-select-trigger { position: relative; display: block; width: 170px; padding: 0 84px 0 22px; font-size: 19px; font-weight: 300; color: #5f5f5f; line-height: 50px; background: #EAEAEA; border-radius: 4px; cursor: pointer; margin-left:20px; border: 1px solid #5f5f5f; transition: all 0.3s; } .custom-select-trigger:hover { background-color: #d9d9d9; transition: all 0.3s; } .custom-select-trigger:after { position: absolute; display: block; content: ''; width: 10px; height: 10px; top: 50%; right: 25px; margin-top: -3px; border-bottom: 1px solid #5f5f5f; border-right: 1px solid #5f5f5f; transform: rotate(45deg) translateY(-50%); transition: all 0.4s ease-in-out; transform-origin: 50% 0; } .custom-select.opened .custom-select-trigger:after { margin-top: 3px; transform: rotate(-135deg) translateY(-50%); } .custom-options { position: absolute; display: block; top: 100%; left: 0; right: 0; margin: 15px 0; border: 1px solid #b5b5b5; border-radius: 4px; box-sizing: border-box; box-shadow: 0 2px 1px rgba(0,0,0,.07); background: #fff; transition: all 0.4s ease-in-out; margin-left: 20px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-15px); } .custom-select.opened .custom-options { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); } .custom-options:before { position: absolute; display: block; content: ''; bottom: 100%; right: 25px; width: 7px; height: 7px; margin-bottom: -4px; border-top: 1px solid #b5b5b5; border-left: 1px solid #b5b5b5; background: #fff; transform: rotate(45deg); transition: all 0.4s ease-in-out; } .option-hover:before { background: #f9f9f9; } .custom-option { position: relative; display: block; padding: 0 22px; border-bottom: 1px solid #b5b5b5; font-size: 18px; font-weight: 600; color: #b5b5b5; line-height: 47px; cursor: pointer; transition: all 0.15s ease-in-out; } .custom-option:first-of-type { border-radius: 4px 4px 0 0; } .custom-option:last-of-type { border-bottom: 0; border-radius: 0 0 4px 4px; } .custom-option:hover, .custom-option.selection { background: #f2f0f0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="sources" id="sources" class="custom-select sources" placeholder="My Categories"> <option value="categoryOne">Category 1</option> <option value="categoryTwo">Category 2</option> <option value="categoryThree">Category 3</option> <option value="categoryFour">Category 4</option> </select>
可以应用于<option>元素的样式属性很少。
这是因为这种类型的元素是一个“替换元素”的例子。它们依赖于操作系统，不是HTML/浏览器的一部分。它不能通过CSS样式。
有一些替换的插件/库看起来像<select>，但实际上是由常规的HTML元素组成的，可以设置样式。
这里有一些方法来样式<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/ #颜色
这里留下一个快速的替代方法，使用表上的类切换。它的行为与选择非常相似，但是可以使用过渡、滤镜和颜色进行样式化，每个子元素都是独立的。
function toggleSelect(){ if (store.classList[0] === "hidden"){ store.classList = "viewfull" } else { store.classList = "hidden" } } #store { overflow-y: scroll; max-height: 110px; max-width: 50% } .hidden { display: none } .viewfull { display: block } #store :nth-child(4) { background-color: lime; } span {font-size:2rem;cursor:pointer} <span onclick="toggleSelect()">⮋</span> <div id="store" class="hidden"> <ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul> </div>
