css input checkbox
0
[已解决问题]
解决于 2016-04-12 13:24
如何 让
<input type="checkbox" name="shop_list" > 的原来样式变为空心圆形 css样式怎样写
最佳答案
1
你好！对于css布局，checkbox本来的样式我们一般都不会用的，要用一般用其他标签比如<b></b>里面写样式来代替checkbox,选中时候再在上面覆盖一个样式，然后用JS来确定选中和没有选中的样式，模仿checkbox
奖励园豆：5
如果一定要修改它本身的样式，不用其他的标签代替该如何做？
其他回答(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>
结果如下：
