一款漂亮的纯CSS单选复选美化样式,这里的单选和复选均以列表形式来展现,复选框选中时整行样式变蓝并有勾选图标效果,单选样式类似但只能选择一行内容。
页面的head部分,需引入页面的样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,在form表单里面设置好checkbox和radio及对应内容,代码如下:
<form class="form">
<h2>复选框</h2>
<div class="inputGroup">
<input id="option1" name="option1" type="checkbox"/>
<label for="option1">健康</label>
</div>
<div class="inputGroup">
<input id="option2" name="option2" type="checkbox"/>
<label for="option2">快乐</label>
</div>
<h2>单选按钮</h2>
<div class="inputGroup">
<input id="radio1" name="radio" type="radio"/>
<label for="radio1">财富</label>
</div>
<div class="inputGroup">
<input id="radio2" name="radio" type="radio"/>
<label for="radio2">自由</label>
</div>
</form>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791