这是我的HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
我想让产品的名称(即。'Product1'， 'Product2'，等等)，以及它的类别(即。电子，体育等)斜体，只使用CSS。我发现了一个老问题，提到这是不可能使用HTML和CSS，但希望，现在有一个解决方案。
当前回答
我发现并使用了这个样式化选择和选项的好例子。你可以选择你想要的。小提琴在这里
// 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…</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…</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>
其他回答
正如已经提到的，唯一的方法是使用一个插件来替换<select>功能。
jQuery插件列表:http://plugins.jquery.com/tag/select/
看一下使用Select2 plugin: http://jsfiddle.net/swsLokfj/23/的例子
我发现并使用了这个样式化选择和选项的好例子。你可以选择你想要的。小提琴在这里
// 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…</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…</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>
如果你不想使用JavaScript，试试这个:
select {
margin-top: 2% !important;
font-size: 19px !important;
text-align: center !important;
width: 25% !important;
padding: 6px 12px !important;
}
option {
min-height: 1.5rem !important;
padding: 14px !important;
}
可以应用于<option>元素的样式属性很少。
这是因为这种类型的元素是一个“替换元素”的例子。它们依赖于操作系统，不是HTML/浏览器的一部分。它不能通过CSS样式。
有一些替换的插件/库看起来像<select>，但实际上是由常规的HTML元素组成的，可以设置样式。
这是一个html css代码，用于样式选项和选择标签。 选择的选项:背景和粗体 关闭后，它看起来是斜体。
<style>
.mydropdown{
border:none;
border-bottom:2px dotted black;
display:inline;max-width:20%;
font-style: italic;
font-weight: 600;
cursor: pointer;
}
.mydropdown:hover , .myoption:active , .myoption:checked{
border:2px dotted green;
}
.myoption{
font-style: normal;
}
.mydropdown .myoption:checked,
.mydropdown .myoption:hover ,
.mydropdown .myoption:active {
font-style: italic;
font-weight: 600;
}
</style>
