我有一个包含多个选项元素的SELECT列表。这是我的一种简单方法，可以对选项文本的某些部分进行样式设置：
<select name="color">
<option value="0">red <span style="font-weight: bold;">SLOW</span></option>
<option value="1">blue <span style="font-weight: bold;">SLOWER</span></option>
<option value="2">green <span style="font-weight: bold;">SLOWEST</span></option>
</select>
这种方法行不通：浏览器不允许在OPTION元素内使用SPAN元素。
有没有其他方法可以为OPTION元素的一部分文本设置样式？
但是你可以创建一个自定义选择框。请参考下面的jsFiddle，
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
html: $this.children('option').eq(i).text()
.split(' ').join(' <span style="color:red">'),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
不行。option会以本地平台的方式进行样式化，仅对其中的一部分进行样式化是无效的（通常这也不是一个特别好的想法）。
或者你可以使用Bootstrap下拉菜单加上几行Javascript来实现。
这是一个稍微修改过的Bootstrap示例，再加上一点Javascript：
$(function() {
$('#my-select').find('li').click(function() {
$('#selected').html($(this).html());
});
});<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Single button -->
<div id='my-select' class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="selected">Action</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action <span style='color:red'>like Super Man</span></a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</body><li>，jquery on.click将触发并将data-id=值传递给隐藏输入表单。 - Abela虽然您无法在OPTION元素内放置标记，但您可以使用CSS ::BEFORE和/或::AFTER伪元素并为它们赋予不同的样式。例如：
<style>
option::before
{content: attr(value) ":";
display:inline-block; padding-right:3px; padding-left:1px;
font-weight:bold; width:1.6em; text-align:right;}
</style>
<select name=menu multiple size=4>
<option value=1>Hamburger</option>
<option value=2>Cheeseburger</option>
<option value=3>Hot Dog</option>
<option value=4>Fries</option>
</select>
这更像是对在其他标签上被关闭为重复问题的回答/解决方法，而不是特别针对<options>进行样式设置。
如果您不介意使用JavaScript，Select2提供了一种非常简洁的方法来实现。它也使用列表来完成此操作。
以下是HTML代码：
<select id="e1" style="width:300px">
<option value="AL" data-badge="3">Alabama</option>
<option value="WY">Wyoming</option>
</select>
这里是CoffeeScript
$("#e1").select2
theme: "bootstrap"
templateResult: (data) ->
badge = $(data.element).data('badge')
if badge
return $(document.createTextNode(data.text)).add($('<span class="badge pull-right">').text(badge))
data.text
这里是JSFiddle。
您可以使用React JS的react-select选项来实现此功能，如下所示。
import { useEffect, useState } from "react";
import Select from "react-select";
function App(props) {
//const options = compliments;
const [state, setState] = useState({
rows: [
{
rowId: 0,
config: ""
}
],
id: 1
});
const [configOpts, setConfigOpts] = useState([]);
const configstyles = {
control: (styles, { isFocused, isSelected }) => ({
...styles,
backgroundColor: "white",
borderColor: isSelected ? "yellow" : "grey"
}),
option: (styles, { data, isDisabled, isFocused, isSelected }) => ({
...styles,
width: "auto"
}),
singleValue: (styles, { data }) => ({
...styles,
":before": {
borderRadius: 10,
content: data.label === "Test3" ? '"Red"' : '"Green"',
color: data.label === "Test3" ? "Red" : "Green",
display: "inline",
marginRight: 8,
height: 10,
width: 10
}
}),
menu: (styles) => ({
...styles,
width: "max-content",
minWidth: "100%"
})
// Input: (styles) => ({ ...styles, width: "auto" })
};
const handleAddRow = () => {
const newRow = {
rowId: state.id,
config: ""
};
setState({
...state,
rows: [...state.rows, newRow],
id: state.id + 1
});
};
const handleRemoveRow = (idx) => () => {
const rows = state.rows.filter((FilterdRow) => FilterdRow.rowId !== idx);
console.log("rows", rows);
setState({
...state,
rows
});
};
const handleConfigChange = (index) => (selectedOption) => {
console.log("SelectedOption: " + selectedOption.label);
const rows = state.rows.map((row) => {
if (row.id === index) {
return {
...row,
["config"]: selectedOption.label
};
}
return row;
});
setState({
...state,
rows
});
};
useEffect(() => {
setConfigOpts([
{ label: "Test11111111111111111111111111", value: "Test1" },
{ label: "Test2", value: "Test2" },
{ label: "Test3", value: "Test3" },
{ label: "Test4", value: "Test4" }
]);
}, []);
return (
<>
<table>
{state.rows.map((item, idx) => (
<tr key={item.rowId}>
<td>
<Select
options={configOpts}
onChange={handleConfigChange(item.rowId)}
styles={configstyles}
/>
</td>
<td>
<button onClick={handleRemoveRow(item.rowId)}>Remove</button>
</td>
</tr>
))}
</table>
<div>
<button onClick={handleAddRow}>Add</button>
</div>
</>
);
}
export default App;
在某些情况下，我可以通过jQuery实现。看这里：http://jsfiddle.net/rangine/wegx00La/4/
我在bootstrap表单中使用了一个选择框来选择一个glyph图标，但不幸的是，它只在Firefox中有效。（我没有在所有浏览器上测试过。在Chrome中不起作用，在IE中更是如此！我已经放弃了它。
HTML：
This code Only works in Firefox.
<br/>
<select id="myselect">
<option value="_none"> - Select One - </option>
<option value="asterisk">asterisk</option>
<option value="plus">plus</option>
<option value="euro" class="red">euro</option>
<option value="eur">eur</option>
<option value="minus" class="green">minus</option>
<option value="cloud">cloud</option>
<option value="envelope">envelope</option>
<option value="pencil">pencil</option>
<option value="glass">glass</option>
<option value="music">music</option>
<option value="search">search</option>
<option value="heart">heart</option>
<option value="star">star</option>
<option value="star-empty">star-empty</option>
<option value="user">user</option>
<option value="film">film</option>
</select>
<span class="preview"> </span>
jQuery：
(function($) {
$(document).ready(function() {
$('#myselect option').each(function() {
$(this).html('<i class="glyphicon glyphicon-' + $(this).text() + '"></i> ' + $(this).text());
})
});
$('.preview').html(' <i class="preview glyphicon glyphicon-' + $('#myselect').val() + '"></i>');
$('#myselect').change(function() {
$('.preview').html(' <i class="preview glyphicon glyphicon-' + $('#myselect').val() + '"></i>');
});
})(jQuery);
#myselect {
margin: 40px;
height: 30px;
font-size: 14pt;
}
option.red {
color: red;
}
option.green {
color: green;
}
.preview {
font-size: 20pt;
}