利用CSS3美化单选、复选按钮的显示样式

2020-05-07 06:57:43易采站长站整理

</div>

<div class="wrapper">
<div class="checkbox-box">
<input name="1" type="checkbox" id="usepwd" />
<span>√</span>
</div>
<label for="usepwd">音乐</label>
</div>

<div class="wrapper">
<div class="checkbox-box">
<input name="1" type="checkbox" id="checkbox3" />
<span>√</span>
</div>
<label for="checkbox3">读书</label>
</div>

<div class="wrapper">
<div class="checkbox-box">
<input name="1" type="checkbox" id="checkbox4" />
<span>√</span>
</div>
<label for="checkbox4">运动</label>
</div>

</form>

<h2>单选框</h2>
<form action="#">
<div class="wrapper">
<div class="redio-box">
<input type="radio" checked="checked" id="boy" name="1" /><span></span>
</div>
<label for="boy">男</label>
</div>

<div class="wrapper">
<div class="redio-box">
<input type="radio" id="girl" name="1" /><span></span>
</div>
<label for="girl">女</label>
</div>
</form>

</body>
</html>

注意:

+  是css的相邻选择符。

关系选择符只有四种,是 空格  >  +   ~ (包含选择符、子选择符、相邻选择符、兄弟选择符)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对软件开发网的支持。