Code
2024-02-14 06:00:05

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

这是我的HTML:

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

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

当前回答

即使没有太多的属性要改变，但你可以实现以下样式只有css:

.options { 边框:1px solid #e5e5e5; 填充:10 px; ｝ 选择{ 字体大小:14 px; 边界:没有; 宽度:100%; 背景:白色; ｝ < div class = "选项”> <选择> 苹果<选项值= " " > < /选项> 香蕉<选项值= " " > < /选项> 橙色<选项值= " " > < /选项> 芒果<选项值= " " > < /选项> < /选择> < / div >

2019-12-06 08:20:54

其他回答

该元素由操作系统呈现，而不是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]
2018-09-27 15:12:41

我发现并使用了这个样式化选择和选项的好例子。你可以选择你想要的。小提琴在这里

// 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&hellip;</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&hellip;</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>

2014-12-16 21:30:53

您可以使用内联样式向<option>标记添加自定义样式。

<option style="font- family:宋体;“>选项1 > < /选项 这将只对这个<option>元素应用样式。

然后你可以使用一点javascript魔法，将内联样式应用到<select>标签中的所有<option>元素，如下所示:

var select = $(document).getElementById('#select-element-id')

Var选项= select.children('#option-element-id')

option.css(“粗细”、“大胆”)

option.css(“字体大小”、“24 px”)

您也可以使用<option value="" disabled> <br> </option>在选项之间添加换行符。

2018-07-19 14:30:55

这里有一些方法来样式<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

您可以在某种程度上设置选项元素的样式。

使用* CSS选择器，您可以在系统绘制的框内设置选项的样式。

例子:

#ddlProducts *
{
 border-radius: 15px;
 background-color: red;
}

它看起来是这样的:

2013-10-07 04:46:44

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1