首页新闻找找看学习计划

css input checkbox

0
[已解决问题] 解决于 2016-04-12 13:24

如何 让 

<input type="checkbox" name="shop_list" > 的原来样式变为空心圆形 css样式怎样写

qianmoRosebush的主页 qianmoRosebush | 菜鸟二级 | 园豆:206
提问于:2016-04-11 18:16
< >
分享
最佳答案
1

 你好!对于css布局,checkbox本来的样式我们一般都不会用的,要用一般用其他标签比如<b></b>里面写样式来代替checkbox,选中时候再在上面覆盖一个样式,然后用JS来确定选中和没有选中的样式,模仿checkbox

奖励园豆:5
front-gl | 菜鸟二级 |园豆:209 | 2016-04-11 21:44

如果一定要修改它本身的样式,不用其他的标签代替该如何做?

qianmoRosebush | 园豆:206 (菜鸟二级) | 2016-04-12 09:14
其他回答(1)
0

<div>
<input type="checkbox" id="shop_list" class="choose" />
<label for="shop_list"></label>
</div>

<style>

.choose{ display:none; }
.choose+label{ background-color: #fff; border:1px solid #ccc; border-radius: 100%; padding: 20px; display: inline-block; vertical-align: middle; position: relative; }
.choose:checked + label { background-color: #e13636; }
.choose:checked + label:after { position: absolute; top: -90px; left: 0px; width: 100%; content: '\2714'; color:#fff; text-align: center; font-size: 25px; vertical-align: text-top; }

</style>

 

 

结果如下:

qianmoRosebush | 园豆:206 (菜鸟二级) | 2016-04-12 13:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册