有个需求,在option中格栅化,折腾过插入空格,背景色svg化之类的,都有些许瑕疵。现在用css解决了。
Demo:select-option-test
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试select(test)</title>
</head>
<style>
select[multiple] {
-webkit-appearance: none;
width: 510px;
background-color: #a8a1c5;
}
option {
cursor: pointer;
position: relative;
left: -10px;
}
/* 鼠标划入 */
/* option:hover {
color: #EC6F66;
} */
/* 鼠标选中 */
/* select:focus {
background-color: #719ECE;
} */
/* 鼠标点击 */
/* select:active {
background-color: #1d1d1b !important;
color: aqua !important;
display: none;
} */
/* 选中的项目 */
/* option:checked {
background-color: #1d1d1b !important;
color: #EC6F66 !important;
display: none;
} */
/* 末尾追加 */
option:after {
content: var(--myTime);
color: black;
position: -webkit-sticky;
/* position: sticky; */
position: absolute;
left: 330px;
}
/* 前面追加 */
option:before {
content: var(--myDIR);;
position:relative;
left:250px;
}
select:focus option:checked:after,
select:focus option:checked:before {
color: white;
}
</style>
<body>
<select id="s" multiple size="8">
<option value="volvo" style="--myTime:'2021/09/22';--myDIR:'DIR';">Volvo1</option>
<option value="saab" style="--myTime:'2021/09/23';--myDIR:'DIR';">Saab22</option>
<option value="opel" style="--myTime:'2021/09/24';--myDIR:' ';">Opel333</option>
<option value="audi" style="--myTime:'2021/09/25';--myDIR:' ';">Audi444</option>
<option value="audi" style="--myTime:'2021/09/26';--myDIR:' ';">55555555</option>
</select>
<select>
<option value="volvo" style="--myTime:'2021/09/22';--myDIR:'DIR';">Volvo</option>
<option value="saab" style="--myTime:'2021/09/24';--myDIR:' ';">Saab</option>
<option value="opel" style="--myTime:'2021/09/24';--myDIR:' ';">Opel</option>
<option value="audi" style="--myTime:'2021/09/24';--myDIR:' ';">Audi</option>
</select>
<select size="8" style="width: 500px;">
<option value="volvo" style="--myTime:'2021/09/22';--myDIR:'DIR';">Volvo</option>
<option value="saab" style="--myTime:'2021/09/22';--myDIR:'DIR';">Saab</option>
<option value="opel" style="--myTime:'2021/09/22';--myDIR:'DIR';">Opel</option>
<option value="audi" style="--myTime:'2021/09/22';--myDIR:'DIR';">Audi</option>
<option value="volvo" style="--myTime:'2021/09/24';--myDIR:' ';">Volvo</option>
<option value="saab" style="--myTime:'2021/09/24';--myDIR:' ';">Saab</option>
<option value="opel" style="--myTime:'2021/09/24';--myDIR:' ';">Opel</option>
<option value="audi" style="--myTime:'2021/09/24';--myDIR:' ';">Audi</option>
<option value="volvo" style="--myTime:'2021/09/24';--myDIR:' ';">Volvo</option>
<option value="saab" style="--myTime:'2021/09/24';--myDIR:' ';">Saab</option>
<option value="opel" style="--myTime:'2021/09/24';--myDIR:' ';">Opel</option>
<option value="audi" style="--myTime:'2021/09/24';--myDIR:' ';">Audi</option>
<option value="volvo" style="--myTime:'2021/09/24';--myDIR:' ';">Volvo</option>
<option value="saab" style="--myTime:'2021/09/24';--myDIR:' ';">Saab</option>
<option value="opel" style="--myTime:'2021/09/24';--myDIR:' ';">Opel</option>
<option value="audi" style="--myTime:'2021/09/24';--myDIR:' ';">Audi</option>
</select>
</body>
</html>
Pingback: option里加svg背景图 – GANWT