我有一個包含幾個選項元素的選擇列表。下面是我對部分選項文本進行樣式化的簡單方法:
<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>這不起作用:瀏覽器不喜歡選項元素中的SPAN元素。
有沒有其他方法來樣式化選項元素的部分文本？
但是你可以創建一個自定義的選擇框。參考下面的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);
}沒有。選項是以平臺固有的方式設計的，只設計其中一部分是行不通的。(這通常也不是一個特別好的主意。)
或者你可以用引導下拉菜單加上幾行Javascript來完成。
下面是一個稍微修改了一下的引導示例和一個“lil Javascript ”:
$(function() {
$('#my-select').find('li').click(function() {
$('#selected').html($(this).html());
});
});<head>
<link 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>雖然不能在選項元素中放置標記，但是可以使用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>這將為每個選項創建一個帶有粗體數字的SELECT元素。
注意:我還沒有在所有的瀏覽器上嘗試過，但是它應該可以在所有的現代瀏覽器上運行。
這更像是對其他標簽上的重復問題的回答/解決方法，而不是特別針對& lt選項& gt。
如果您不介意使用JavaScript，Select2提供了一種非常簡潔的方法來實現這一點。它也確實為此使用了列表。
這是HTML
<select id="e1" style="width:300px">
<option value="AL" data-badge="3">Alabama</option>
<option value="WY">Wyoming</option>
</select>這是咖啡腳本
$("#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。
選項標記中允許的內容是文本，可能帶有轉義字符(如& eacute).MDN文檔了解更多詳情
您可以使用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;CodeSandbox
在某些情況下，我可以通過jQuery做到這一點。看這里:http://jsfiddle.net/rangine/wegx00La/4/
我使用了一個選擇框來選擇引導形式的字形圖標。 但不幸的是，這只適用于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);一些CSS:
#myselect {
margin: 40px;
height: 30px;
font-size: 14pt;
}
option.red {
color: red;
}
option.green {
color: green;
}
.preview {
font-size: 20pt;
}