我想顯示一個selectoption的粗體文本，如下圖所示。 代碼在Chrome瀏覽器以外的所有瀏覽器中都能正常工作。我怎麼解決這個問題？如何在Chrome中提供選項標籤font-weight：bold？
<select style="font-weight:normal">
<option style="font-weight:bold">Bold text here</option>
<option style="font-weight:bold">Bold text here</option>
<option style="font-weight:bold">Bold text here</option>
<option style="font-weight:bold">Bold text here</option>
</select>
能給我們更多的信息你需要這個東西？
對於爲例：如果你需要大膽選擇的選項，我用這樣一個黑客，當你選擇一個選項，它變得大膽：
小提琴：http://jsfiddle.net/Gt7Yq/
HTML：
<select>
<optgroup id='111' label="111" style="display:none"></optgroup>
<option value="111">111</option>
<optgroup id='222' label="222" style="display:none"></optgroup>
<option value="222">222</option>
</select>
JS：
$('select').on('change',function(){
$('optgroup').hide();
$('select option').show();
$('select option:selected').hide();
$('#'+$('select option:selected').val()).show();
});
，但如果你想顯示規格IAL的選擇，即使不是選擇......我不能幫你...（但interrest我的答案）
可能的重複。但不會普遍工作。 –
的基本思路是這樣的
<div id="list1" class="dropdown-check-list">
<span class="anchor">Select Fruits</span>
<ul class="items">
<li><b>Apple</b></li>
<li>Orange</li>
<li>Grapes </li>
<li>Berry </li>
<li>Mango </li>
<li>Banana </li>
</ul>
</div>
CSS
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
腳本
<script type="text/javascript">
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
</script>
這會讓你開始。這使用最小的JavaScript。你可以做更多。 小提琴和實驗。
你最不可能的，至少不是與本地'
請參閱http://stackoverflow.com/questions/11536763/select-dropdown-option-bold-in-chrome –
[如何樣式化選擇標記的選項元素？]（http://stackoverflow.com/questions/5887133/how-to-style-a-select-tags-option-element） – TylerH