漂亮的纯CSS单选复选美化样式【原创

来源:https://www.sucaihuo.com/js/3012.html 2017-09-15 21:20浏览(6771) 收藏

一款漂亮的纯CSS单选复选美化样式,这里的单选和复选均以列表形式来展现,复选框选中时整行样式变蓝并有勾选图标效果,单选样式类似但只能选择一行内容。
漂亮的纯CSS单选复选美化样式
分类:表单代码 > 复选框 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/3012.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2