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|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|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|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|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|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|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|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|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?

这是我的HTML：<select id="ddlProducts" name="ddProducts">     <option>Product1 : Electronics </option>    <option>Product2 : Sports </option></select>我想要将产品的名称(即'Pro...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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