我想把label的样式换成这样的！！！急急急，在线等
原始图片是这样的
我想修改成这样的
请大神帮帮忙？
慕神0852026浏览 2301回答 4
4回答
-
刚毅87
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div { width: 30px; height: 30px; background: pink; border-radius: 50%; text-align: center; line-height: 35px; color: white; margin-top: 52px; display: inline-block; } </style> </head> <body> <div class="radius">√</div> <div>√</div> <div>√</div> <div>√</div> <div>√</div> <div>√</div> <div>√</div> <div>√</div> <div>√</div> <div>√</div> </body> <script type="text/javascript"> var div1 = document.getElementsByTagName("div"); for (var i in div1) { div1[i].onclick = function() { this.style.backgroundColor == "blue" ? this.style.backgroundColor = "pink" : this.style.backgroundColor = "blue"; } } </script> </html> -
刚毅87
我不会改 lable 的样式,但是我可以以另一种方法实现.代码如下<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .radius { width: 30px; height: 30px; background: pink; border-radius: 50%; text-align: center; line-height: 35px; color: white; } </style> </head> <body> <div class="radius">√</div> </div> </body> <script type="text/javascript"> var div1 = document.getElementsByClassName("radius"); div1[0].onclick = function() { this.style.backgroundColor == "blue" ? this.style.backgroundColor = "pink" : this.style.backgroundColor = "blue"; } </script> </html> -
赵志广
.alizi-radio-group{position:relative;display:inline-block;padding-left:34px;line-height:30px;padding-right:20px;} .alizi-radio{position:absolute;left:0;top:0;width: 30px;} .alizi-radio label{display:inline-block;cursor:pointer;margin-left: 0px;} .alizi-radio input{opacity:0;position:absolute;left:0;top:3px;width: 25px;height: 25px;} .alizi-radio input + label:after{display:inline-block;content:'';width:20px;height:20px;border:1px solid #ccc;border-radius:11px;cursor:pointer;vertical-align:middle} .alizi-radio input:checked + label:after{background:#52d40b url(../images/icon-right.png) center no-repeat;background-size:16px;border-color:#52d40b}<span class="alizi-radio-group"> <span class="alizi-radio"><input id="ys0" name="ys" type="radio" value="未拆封iPhone 6s 16GB 金色" name="item_params" checked><label for="选择颜色0"></label></span> 未拆封iPhone 6s 16GB 金色</span> <span class="alizi-radio-group"> <span class="alizi-radio"><input id="ys1" name="ys" type="radio" value="未拆封iPhone 6s 16GB银色" name="item_params" ><label for="选择颜色1"></label></span> 未拆封iPhone 6s 16GB银色</span> <span class="alizi-radio-group"> <span class="alizi-radio"><input id="ys2" name="ys" type="radio" value="未拆封iPhone 6s 16GB玫瑰金色" name="item_params" ><label for="选择颜色2"></label></span> 未拆封iPhone 6s 16GB玫瑰金色</span> <span class="alizi-radio-group"> <span class="alizi-radio"><input id="ys3" name="ys" type="radio" value="未拆封iPhone 6s 16GB 深空灰色" name="item_params" ><label for="选择颜色3"></label></span> 未拆封iPhone 6s 16GB 深空灰色</span> -
Raelovejava
用css样式和背景图片来完成
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5