最佳答案
我知道这个问题有点旧(或者至少不是新的),但我想展示一种非常简单的方法来模拟选择元素,而不是使用How to style the option of a html “select”?中建议的“替换插件”.
可能有很多,很多方法可以做到这一点,但我尽量保持简单,所以我的模拟方法只使用CSS.它是相当简单的骨头,但我想指出这样做并不复杂,你可能不需要插件来做它.
注1:我使用< label>而不是使用< option>.由于< label>是一个交互式元素,在内部放置一些交互式内容(如< button>)可能会搞砸它.无论如何,选项通常都是非交互式的,但请注意,这种简单的仿真无法完成所有操作.
注意2:如果您希望能够选择多个选项,只需搜索“radio”并替换为“checkBox”.
Emulating Select Using Radio – No Collapse
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
dio_select">
dio" name="radio_select" />
相关文章
Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效