这是我的HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
我想让产品的名称(即。'Product1'， 'Product2'，等等)，以及它的类别(即。电子，体育等)斜体，只使用CSS。我发现了一个老问题，提到这是不可能使用HTML和CSS，但希望，现在有一个解决方案。
当前回答
(() => { 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>
其他回答
该元素由操作系统呈现，而不是HTML。它不能通过CSS样式。
$(function() { var clicky; var t=0; $(document).mousedown(function(e) { clicky = $(e.target); }); $(document).mouseup(function(e) { clicky = null; }); $("select").focusout(function(e) { if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) { $(this).parents().children("span.selected").html(clicky.html()); $(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true); } $(this).parents().children("span.lists").html(''); }); $('select > option').text(function(i, text) { var attr = $(this).attr('selected'); if (typeof attr !== typeof undefined && attr !== false) { $(this).parents().parents().children("span.selected").html(text); } }); $("select").focusin(function(){ $(this).children('option').text(function(i, text) { $(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>"); }); }); }); select { width: 0px; height: 0px; overflow:hidden; outline: none; border: none; appearance:none; -moz-appearance: none; } label{ display: inline-block; padding: 5px 10px; position: relative; width: 100px; height: 20px; background-color:#ccc; } label .selected{ display: inline-block; overflow: hidden; width: 100%; height: 100%; } label span.lists{ width: 100%; display: inline-block; position: absolute; top: 100%; left: 0px; box-shadow: 0px 0px 2px 0px #ccc; background-color:#fff; z-index: 9; } label span.item{ display: inline-block; width: 100%; border-bottom: 1px solid #ccc; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <form action="?" method="GET"> <label><span class="selected">select..</span> <span class="lists"></span> <select name="test"> <option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option> <option value="2" selected>item 2</option> <option value="3">item 3</option> <option value="4">item 4</option> </select> </label><br> <label><span class="selected">select..</span> <span class="lists"></span> <select name="test2"> <option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option> <option value="2">item 2</option> <option value="3" selected>item 3</option> <option value="4">item 4</option> </select> </label><br> <button>Submit</button> </form> </body> </html>
试试这个，可能会对你有帮助
[ https://codepen.io/venu9l/pen/jeNXzY][1]
您可以在某种程度上设置选项元素的样式。
使用* CSS选择器，您可以在系统绘制的框内设置选项的样式。
例子:
#ddlProducts *
{
border-radius: 15px;
background-color: red;
}
它看起来是这样的:
即使没有太多的属性要改变，但你可以实现以下样式只有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>
你可以添加一个类并给出font-weight:700;在选择。但是通过使用这个，所有的文本将变成粗体。
