blocks|key|582278|text|您可以在某种程度上设置选项元素的样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582279|使用*+CSS选择器，您可以在系统绘制的框内设置选项的样式。|offset|length|style|CODE|582280|示例：|582281|#ddlProducts+*
{
+border-radius:+15px;
+background-color:+red;
}|code-block|syntax|javascript|582282|它看起来像这样：|582283|​|582284|📷|atomic|582285|582286|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/95e1241b51e3adf920971823dcfbf085.png|imageAlt^0|0|2|1|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1A|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@]|A|$]]|$1|S|3|T|5|U|7|1D|8|@]|9|@$D|1E|E|1F|1|1G]]|A|$]]|$1|V|3|R|5|6|7|1H|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13|14|-4]]]]

<p>You can style the option elements to some extent.</p>
<p>Using the <code>*</code> CSS selector you can style the options inside the box that is drawn by the system.</p>
<p>Example:</p>
<pre><code>#ddlProducts *
{
 border-radius: 15px;
 background-color: red;
}
</code></pre>
<p>That will look like this:</p>
<p><img src="https://i.stack.imgur.com/I6vRJ.png" alt="enter image description here" /></p>


blocks|key|798474|text|似乎我可以直接在Chrome或Firefox中设置select的CSS。下面提供了CSS和HTML代码：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|798475|​|798476|.boldoption+{
++++font-weight:+bold;
}|code-block|syntax|javascript|798477|<select>
++++<option>Some+normal-font+option</option>
++++<option>Another+normal-font+option</option>
++++<option+class="boldoption">Some+bold+option</option>
</select>|798478|📷|atomic|798479|798480|798481|798482|798483|798484|798485|798486|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/b448af10080e09e7d93585ccafdba627.jpeg|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/7318ed7a0ac3c01048d2e6dbbe9840de.jpeg|2|https://ask.qcloudimg.com/http-save/yehe-900000/4f40d1e4dffc9e217009cadcd75fea80.jpeg^0|P|6|0|0|0|0|0|1|0|0|0|0|0|1|1|0|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|Q|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|R|3|G|5|6|7|1L|8|@]|D|@]|E|$]]|$1|S|3|G|5|6|7|1M|8|@]|D|@]|E|$]]|$1|T|3|P|5|Q|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|U|3|G|5|6|7|1R|8|@]|D|@]|E|$]]|$1|V|3|G|5|6|7|1S|8|@]|D|@]|E|$]]|$1|W|3|P|5|Q|7|1T|8|@]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|X|3|G|5|6|7|1X|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15|16|-4]]|17|$5|11|12|13|E|$14|18|16|-4]]|19|$5|11|12|13|E|$14|1A|16|-4]]]]

<p>Seems like I can just set the CSS for the <code>select</code> in Chrome or Firefox directly.  CSS and HTML code provided below :</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.boldoption {
    font-weight: bold;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
    &lt;option&gt;Some normal-font option&lt;/option&gt;
    &lt;option&gt;Another normal-font option&lt;/option&gt;
    &lt;option class="boldoption"&gt;Some bold option&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>

<a href="https://i.stack.imgur.com/IFoWU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IFoWU.jpg" alt="Working Code on Chrome" /></a></p>
<p><a href="https://i.stack.imgur.com/lYLaS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lYLaS.jpg" alt="Working Code on Firefox" /></a></p>
<p><a href="https://i.stack.imgur.com/tMlBc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tMlBc.jpg" alt="Working Code on Firefox 93" /></a></p>


blocks|key|582306|text|正如已经提到的，唯一的方法是使用一个插件来替代<select>功能。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|582307|jQuery插件列表：http://plugins.jquery.com/tag/select/|582308|看一下使用Select2插件的示例：http://jsfiddle.net/swsLokfj/23/|582309|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/tag/select/|1|http://jsfiddle.net/swsLokfj/23/^0|N|8|0|B|11|0|0|5|7|I|W|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|I|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|J|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

<p>As already mentioned, the only way is to use a plugin that replaces <code>&lt;select&gt;</code> functionality.</p>

<p>A list of jQuery plugins: <a href="http://plugins.jquery.com/tag/select/" rel="nofollow">http://plugins.jquery.com/tag/select/</a> </p>

<p>Take a look at the example using <code>Select2</code> plugin: <a href="http://jsfiddle.net/swsLokfj/23/" rel="nofollow">http://jsfiddle.net/swsLokfj/23/</a></p>


blocks|key|582501|text|Bootstrap允许您通过data-content使用样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582502|<select+class="selectpicker">
++<option+data-content="<span+class='label+label-success'>Relish</span>">Relish</option>
</select>|code-block|syntax|javascript|582503|示例：https://silviomoreto.github.io/bootstrap-select/examples/|offset|length|582504|entityMap|0|LINK|mutability|MUTABLE|url|https://silviomoreto.github.io/bootstrap-select/examples/^0|0|0|3|1L|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Bootstrap allows you to use styling via data-content:</p>

<pre><code>&lt;select class="selectpicker"&gt;
  &lt;option data-content="&lt;span class='label label-success'&gt;Relish&lt;/span&gt;"&gt;Relish&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Example:
<a href="https://silviomoreto.github.io/bootstrap-select/examples/" rel="nofollow noreferrer">https://silviomoreto.github.io/bootstrap-select/examples/</a></p>


blocks|key|582569|text|实际上，您可以添加:之前和:之后，并设置它们的样式。至少它是一些东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582570|​|582571|option+{
++font-size:+18px;
++background-color:+#ffffff;
}

option:before+{
++content:+">";
++font-size:+20px;
++display:+none;
++padding-right:+10px;
++padding-left:+5px;
++color:+#fff;
}

option:hover:before+{
++display:+inline;
}|code-block|syntax|javascript|582572|<select+id="ddlProducts"+name="ddProducts">
++<option>Product1+:+Electronics+</option>
++<option>Product2+:+Sports+</option>
</select>|582573|582574|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Actually you can add :before and :after and style those. At least it's something</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>option {
  font-size: 18px;
  background-color: #ffffff;
}

option:before {
  content: "&gt;";
  font-size: 20px;
  display: none;
  padding-right: 10px;
  padding-left: 5px;
  color: #fff;
}

option:hover:before {
  display: inline;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="ddlProducts" name="ddProducts"&gt;
  &lt;option&gt;Product1 : Electronics &lt;/option&gt;
  &lt;option&gt;Product2 : Sports &lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|582882|text|这就是你要找的吗？我和jQuery一起做的！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582883|运行代码片段|582884|​|582885|$(".custom-select").each(function()+{
++++var+classes+=+$(this).attr("class"),
++++++++id++++++=+$(this).attr("id"),
++++++++name++++=+$(this).attr("name");
++++var+template+=++'<div+class="'+%2B+classes+%2B+'">';
++++template+%2B=+'<span+class="custom-select-trigger">'+%2B+$(this).attr("placeholder")+%2B+'</span>';
++++template+%2B=+'<div+class="custom-options">';
++++$(this).find("option").each(function()+{
++++++++template+%2B=+'<span+class="custom-option+'+%2B+$(this).attr("class")+%2B+'"+data-value="'+%2B+$(this).attr("value")+%2B+'">'+%2B+$(this).html()+%2B+'</span>';
++++});
++++template+%2B=+'</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());
});|code-block|syntax|javascript|582886|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%25;+right:+25px;
++++++++margin-top:+-3px;
++++++++border-bottom:+1px+solid+#5f5f5f;
++++++++border-right:+1px+solid+#5f5f5f;
++++++++transform:+rotate(45deg)+translateY(-50%25);
++++++++transition:+all+0.4s+ease-in-out;
++++++++transform-origin:+50%25+0;
++++}
++++.custom-select.opened+.custom-select-trigger:after+{
++++++++margin-top:+3px;
++++++++transform:+rotate(-135deg)+translateY(-50%25);
++++}
++++.custom-options+{
++++++++position:+absolute;
++++++++display:+block;
++++++++top:+100%25;+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%25;+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;
++++}|582887|<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>|582888|582889|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|U|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|M|3|N|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|O|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>Is this what youre looking for? I did it with jQuery!</p>
<p>Run Code Snippet</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(".custom-select").each(function() {
    var classes = $(this).attr("class"),
        id      = $(this).attr("id"),
        name    = $(this).attr("name");
    var template =  '&lt;div class="' + classes + '"&gt;';
    template += '&lt;span class="custom-select-trigger"&gt;' + $(this).attr("placeholder") + '&lt;/span&gt;';
    template += '&lt;div class="custom-options"&gt;';
    $(this).find("option").each(function() {
        template += '&lt;span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '"&gt;' + $(this).html() + '&lt;/span&gt;';
    });
    template += '&lt;/div&gt;&lt;/div&gt;';

    $(this).wrap('&lt;div class="custom-select-wrapper"&gt;&lt;/div&gt;');
    $(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());
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;select name="sources" id="sources" class="custom-select sources" placeholder="My Categories"&gt;
    &lt;option value="categoryOne"&gt;Category 1&lt;/option&gt;
    &lt;option value="categoryTwo"&gt;Category 2&lt;/option&gt;
    &lt;option value="categoryThree"&gt;Category 3&lt;/option&gt;
    &lt;option value="categoryFour"&gt;Category 4&lt;/option&gt;

&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|582621|text|这里留下了一个快速的选择，在表上使用类切换。其行为与select非常相似，但可以使用过渡、滤镜和颜色来设置样式，每个子项都是单独的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582622|​|582623|function+toggleSelect(){+
+if+(store.classList[0]+===+"hidden"){
++++store.classList+=+"viewfull"
++}
++else+{
++++store.classList+=+"hidden"
++}
}|code-block|syntax|javascript|582624|#store+{
++overflow-y:+scroll;
++max-height:+110px;
++max-width:+50%25
+}
+
.hidden+{
++display:+none
+}
+
.viewfull+{
++display:+block
}

#store+:nth-child(4)+{
++background-color:+lime;
}

span+{font-size:2rem;cursor:pointer}|582625|<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%2520u">stars%2520u</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>|582626|582627|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Leaving here a quick alternative, using class toggle on a table. The behavior is very similar than a select, but can be styled with transition, filters and colors, each children individually.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function toggleSelect(){ 
 if (store.classList[0] === "hidden"){
    store.classList = "viewfull"
  }
  else {
    store.classList = "hidden"
  }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span onclick="toggleSelect()"&gt;⮋&lt;/span&gt;
 &lt;div id="store" class="hidden"&gt;
 
&lt;ul&gt;&lt;li&gt;&lt;a href="#keylogger"&gt;keylogger&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#1526269343113"&gt;1526269343113&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#slow"&gt;slow&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#slow2"&gt;slow2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#Benchmark"&gt;Benchmark&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#modal"&gt;modal&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#buma"&gt;buma&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#1526099371108"&gt;1526099371108&lt;/a&gt;&lt;/li&gt;&lt;a href="#1526099371108o"&gt;1526099371108o&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#pwnClrB"&gt;pwnClrB&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#stars%20u"&gt;stars%20u&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#pwnClrC"&gt;pwnClrC&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#stars "&gt;stars &lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#wello"&gt;wello&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#equalizer"&gt;equalizer&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#pwnClrA"&gt;pwnClrA&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
 
 &lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|798679|text|您可以使用内联样式向<option>标签添加自定义样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|798680|对于例如：<option+style="font-weight:bold;color:#09C;">Option+1</option>，这将仅将样式应用于这个特定的<option>元素。|798681|然后，您可以使用一点javascript魔术将内联样式应用于<select>标记中的所有<option>元素，如下所示：|798682|var+select+=+$(document).getElementById('#select-element-id')|798683|var+option+=+select.children('#option-element-id')|798684|option.css('font-weight',+'bold')|798685|option.css('font-size',+'24px')|798686|也可以使用<option+value=""+disabled>+<br>+</option>在选项之间添加换行符。|798687|entityMap^0|A|8|0|5|1Q|2A|8|0|U|8|18|8|0|0|1P|0|0|1E|0|0|X|0|0|V|0|5|15|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|U|$]]

<p>You can use inline styles to add custome styling to <code>&lt;option&gt;</code> tags.</p>

<p>For eg : <code>&lt;option style="font-weight:bold;color:#09C;"&gt;Option 1&lt;/option&gt;</code>
This will apply the styles to this particular <code>&lt;option&gt;</code> element only. </p>

<p>Then you can use a bit of javascript magic to apply the inline styles to all of the <code>&lt;option&gt;</code> elements within a <code>&lt;select&gt;</code> tag like so : </p>

<p><code>var select = $(document).getElementById('#select-element-id')</code></p>

<p><code>var option = select.children('#option-element-id')</code></p>

<p><code>option.css('font-weight', 'bold')</code></p>

<p><code>option.css('font-size', '24px')</code></p>

<p>You can also use <code>&lt;option value="" disabled&gt; &lt;br&gt; &lt;/option&gt;</code> to add a line-break between the options.</p>


blocks|key|582828|text|即使没有太多的属性需要更改，但您只能使用css来实现以下样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582829|​|582830|📷|atomic|offset|length|582831|582832|582833|.options+{
++border:+1px+solid+#e5e5e5;
++padding:+10px;
}

select+{
++font-size:+14px;
++border:+none;
++width:+100%25;
++background:+white;
}|code-block|syntax|javascript|582834|<div+class="options">
++<select>
++++<option+value="">Apple</option>
++++<option+value="">Banana</option>
++++<option+value="">Orange</option>
++++<option+value="">Mango</option>
++</select>
</div>|582835|582836|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/b218d478706c3be5f19c00b6d2e89180.png|imageAlt^0|0|0|0|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@$G|14|H|15|1|16]]|A|$]]|$1|I|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|19|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|M|7|1A|8|@]|9|@]|A|$N|O]]|$1|R|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]]]

<p>Even if there aren't much properties to change, but you can achieve following style only with css:</p>
<p><a href="https://i.stack.imgur.com/H1XI9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H1XI9.png" alt="enter image description here" /></a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.options {
  border: 1px solid #e5e5e5;
  padding: 10px;
}

select {
  font-size: 14px;
  border: none;
  width: 100%;
  background: white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="options"&gt;
  &lt;select&gt;
    &lt;option value=""&gt;Apple&lt;/option&gt;
    &lt;option value=""&gt;Banana&lt;/option&gt;
    &lt;option value=""&gt;Orange&lt;/option&gt;
    &lt;option value=""&gt;Mango&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|798733|text|此元素由操作系统呈现，而不是由HTML呈现。它不能通过CSS设置样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|798734|​|798735|	$(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="'%2Bclicky.attr('id')%2B'"]').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='"%2B$(this).attr('value')%2B"'>"%2Btext%2B"</span>");
				});
		});

	});|code-block|syntax|javascript|798736|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%25;
	height:+100%25;
}
label+span.lists{
	width:+100%25;
	display:+inline-block;
	position:+absolute;
	top:+100%25;
	left:+0px;
	box-shadow:+0px+0px+2px+0px+#ccc;
	background-color:#fff;
	z-index:+9;
}
label+span.item{
	display:+inline-block;
	width:+100%25;
	border-bottom:+1px+solid+#ccc;
}|798737|<!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>|798738|798739|试试这个，可能会对你有帮助。|798740|[+https://codepen.io/venu9l/pen/jeNXzY][1]|798741|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|Z|8|@]|9|@]|A|$]]|$1|P|3|Q|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>This element is rendered by the OS, not HTML. It cannot be styled via CSS. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>	$(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 &amp;&amp; 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 &gt; option').text(function(i, text) {
				var attr = $(this).attr('selected');
				if (typeof attr !== typeof undefined &amp;&amp; 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("&lt;span class='item' id='"+$(this).attr('value')+"'&gt;"+text+"&lt;/span&gt;");
				});
		});

	});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;form action="?" method="GET"&gt;
	&lt;label&gt;&lt;span class="selected"&gt;select..&lt;/span&gt; &lt;span class="lists"&gt;&lt;/span&gt;
	&lt;select name="test"&gt;
		&lt;option value="1"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/option&gt;
		&lt;option value="2" selected&gt;item 2&lt;/option&gt;
		&lt;option value="3"&gt;item 3&lt;/option&gt;
		&lt;option value="4"&gt;item 4&lt;/option&gt;
	&lt;/select&gt;
	&lt;/label&gt;&lt;br&gt;
	&lt;label&gt;&lt;span class="selected"&gt;select..&lt;/span&gt; &lt;span class="lists"&gt;&lt;/span&gt;
	&lt;select name="test2"&gt;
		&lt;option value="1"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/option&gt;
		&lt;option value="2"&gt;item 2&lt;/option&gt;
		&lt;option value="3" selected&gt;item 3&lt;/option&gt;
		&lt;option value="4"&gt;item 4&lt;/option&gt;
	&lt;/select&gt;
	&lt;/label&gt;&lt;br&gt;
	&lt;button&gt;Submit&lt;/button&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>try this it may help you </p>

<pre><code>[ https://codepen.io/venu9l/pen/jeNXzY][1]
</code></pre>


blocks|key|582743|text|您可以添加一个类并给出font-weight:700；in选项。但是通过使用这个，所有的文本都会变得粗体。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582744|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You can add a class and gives font-weight:700; in option. But by using this all the text will become bold.</p>


blocks|key|799003|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|799004|📷|atomic|offset|length|799005|799006|这是一个html+css代码，用于设置选项和选择标签的样式。选择的选项:背景和粗体关闭后，它看起来在itlaics中。|799007|++++<style>
++++++++.mydropdown{
+++++++++border:none;
+++++++++border-bottom:2px+dotted+black;
+++++++++display:inline;max-width:20%25;
+++++++++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>|code-block|syntax|javascript|799008|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/96c31ceac06d958afe6d25407c7dd6d2.png|imageAlt^0|0|0|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@$E|Z|F|10|1|11]]|A|$]]|$1|G|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

<p><a href="https://i.stack.imgur.com/C0RHc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C0RHc.png" alt="Output of below code" /></a></p>
<p>This is a html css code used to style option and select tag.
Selected option : background and bold
After closing , it looks in itlaics.</p>
<pre><code>    &lt;style&gt;
        .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;
     }
    &lt;/style&gt;
</code></pre>


blocks|key|799010|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|799011|(()+=>+{
++++++++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");
++++++++}
++++++})();|code-block|syntax|javascript|799012|/*+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%25;
++++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%25;
++++box-shadow:+0+7px+30px+-10px+#96aa6480;
++++width:+100%25;
++++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);
++}|799013|<!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">&nbsp;</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>|799014|799015|enter+image+description+here|offset|length|799016|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/wBW4U.png^0|0|0|0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(() =&gt; {
        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) =&gt; {
          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");
        }
      })();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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);
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form class="search-form"&gt;
      &lt;input type="hidden" name="search-form-loc" id="search-form-loc" /&gt;
      &lt;div class="pos-rel"&gt;
        &lt;div class="search-form__selector"&gt;
          &lt;p class="search-form__label search-form__label--loc"&gt;Select From List&lt;/p&gt;
          &lt;div class="search-form__line"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;i class="fa fa-caret-down search-form__icon"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;ul class="search-form__dropdown"&gt;
          &lt;li class="search-form__value" data-loc="search-form-loc"&gt;UK&lt;/li&gt;
          &lt;li class="search-form__value" data-loc="search-form-loc"&gt;Barcelona&lt;/li&gt;
          &lt;li class="search-form__value" data-loc="search-form-loc"&gt;Brazil&lt;/li&gt;
          &lt;li class="search-form__value" data-loc="search-form-loc"&gt;Hungary&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>
<p><a href="https://i.stack.imgur.com/wBW4U.png" rel="nofollow noreferrer">enter image description here</a></p>


<p>Here's my HTML: </p>

<pre><code>&lt;select id="ddlProducts" name="ddProducts"&gt; 
    &lt;option&gt;Product1 : Electronics &lt;/option&gt;
    &lt;option&gt;Product2 : Sports &lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>I want to make the name of the product (i.e. 'Product1', 'Product2' , etc) bold, and its categories(viz. Electronics, Sports, etc) italicized, using CSS only. I found an old question that mentioned it's not possible using HTML and CSS, but hopefully, there's a solution now.</p>


How to style the option of an html "select" element?

jQuery

这是我的HTML：<select id="ddlProducts" name="ddProducts">     <option>Product1 : Electronics </option>    <option>Product2 : Sports </option></select>我想要将产品的名称(即'Product1‘、'Product2’等)粗体，及其类别(即电子，体育等)斜体，仅使

问如何样式化一个html "select“元素的选项？
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何样式化一个html "select“元素的选项？EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何样式化一个html "select“元素的选项？
EN