一个select 一个样式 如何做，是不是需要css

[代码之城]

一个select 一个样式 如何做，图片为证

[当作看不见]

加一个class ,边框加粗变色,这个选项下的图片展示出来.. .xx{ border:1px solid pink } .xx img{ visibility: hidden; } .active{ border:2px solid pink } .active img{ visibility: visible; } 小图片定位啥的就不说了. 这样的话,只要添加一个active 这个class 就好了

[代码之城]

css样式这样改的话， asp 接收数据代码不用管吧，是不是还和以前一样啊

[代码之城]

<input type="checkbox" 是这个空间如何变成图片样式啊，

[代码之城]

支持这些浏览器吗 Chrome 63.0.3239 14 29.2% MSIE 57.0,Firefox 57.0 5 10.4% Chrome 61.0.3163 4 8.3% UCWEB 2.0 3 6.2% Chrome 38.0.1025 3 6.2% Chrome 40.0.2214 2 4.2% Edge 15.15063 2 4.2% Chrome 62.0.3202 2 4.2% MSIE 11.0 1 2.1% Opera 9.80,Opera Mini 4 1 2.1% Edge 16.16299 1 2.1% Chrome 53.0.2785 1 2.1% Chrome 55.0.2883 1 2.1% Chrome 59.0.3071 1 2.1% Chrome 60.0.3112 1 2.1% AppleWebKit 534.30,Safari 4.0 1 2.1% AppleWebKit 602.1.50,Safari 602.1 1 2.1% AppleWebKit 603.2.4,Safari 10.0 1 2.1% AppleWebKit 604.1.38,Safari 11.0 1 2.1% AppleWebKit 604.4.7,Safari 11.0

[代码之城]

都通用手机吗，现在手机客户端非常多

[神之左手]

先决条件：支持IE9及以上，IE8则需要配合JS实现点击的class修改 原理如下 1.input的单选框和复选框，其实是可以响应宽度和高度的设置的，不过在firefox下它的选框大小不会改变，但实际占据的宽高还是会按设定值进行调整，并影响它的点击热区 2.对于input可以使用opacity:0在视觉上进行隐藏，但依然有占位，依然能响应鼠标事件，visibility:hidden在这里的问题是鼠标事件无法响应。注意IE8下由于不支持opacity样式，请用IE的alpha滤镜代替 3.【关键】使用:checked伪类和+邻接选择器进行所需的样式设定，IE8不支持该伪类，请用JS进行点击后的样式扩展，比如增加一个.checked的css样式 这里是我自己写的表单控件的一部分，供参考，IE8的协调JS不提供了

<style type="text/css">
.rexButton,.rexInput,.rexCheck,.rexTurn,.rexSwitch,.rexSelect,.rexLable,.rexTip,.rexField{ display:inline-block; padding:.5em .8em; border:1px solid #ccc; background-color:#f0f0f0; border-radius:6px; overflow:hidden; vertical-align:middle; line-height:normal; position:relative; white-space:nowrap;}
/* 块状单选复选框 */
.rexTurn{ border-color:transparent; background-color:transparent; overflow:visible;}
.rexTurn input[type="checkbox"],.rexTurn input[type="radio"]{ position:absolute; z-index:5; top:0; left:0; width:100%; height:100%; opacity:0; cursor: pointer;}
.rexTurn input+label:before{ content:""; position:absolute; width:100%; height:100%; z-index:-1; background-color:#f2f2f2; box-shadow:0 0 0 1px #ccc; top:0; left:0; border-radius:6px;}
.rexTurn input:checked+label:before{ background-color:#fff; box-shadow:0 0 0 1px #666;}
.rexTurn input:checked+label:after{ content:""; position:absolute; z-index:5; width:0; height:0; line-height:0; text-align:right; border:.5em solid #666; border-top-color:transparent; border-left-color:transparent; border-bottom-right-radius:4px; bottom:0; right:0;}
.rexTurn input[type="checkbox"]:checked+label:after{ font-size:.85em; content:"√"; color:#fff;}
</style>
<span class="rexTurn">
  <input type="checkbox" value="1"/>
  <label>选项1</label>
</span>

[程序混混]

看不懂，有更简单的吗

[szuzsq]

直接一个checkbox，然后改变样式来达到目的，似乎没有这么先进啊。
我看优秀的团队做的，都是隐藏checkbox，然后用一些元素叠出这些效果。
例如