专注Php网页设计制作小程序开发外贸网站功能定制 - (承接设计制作/小程序手机站功能订制seo优化维护等) :673592626:280934751:865129233

电商资源网

css3单选框复选框按钮样式美化代码

时间:2018-09-03所属栏目:前端开发 来源: 电商之家

图片地址:http://yanshi.sucaihuo.com/jquery/39/3904/demo/images/ico_checkon.svg

一款简单实用的css3单选框复选框按钮样式美化代码,纯css3属性实现,不用任何插件。原理:1、把input隐藏,2、美化label。
css3单选框复选框按钮样式美化代码
<!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport" />
   
  <style type="text/css">
  body {
  font: 14px/150% microsoft yahei,tahoma;
  }
  .clear {
  clear: both
  }
  .RadioStyle input {
  display: none
  }
  .RadioStyle label {
  border: 1px solid #00a4ff;
  padding: 2px 10px 2px 5px;
  line-height: 28px;
  min-width: 80px;
  text-align: center;
  float: left;
  margin: 2px;
  border-radius: 4px
  }
  .RadioStyle input:checked + label {
  background: url(images/ico_checkon.svg) no-repeat right bottom;
  background-size: 21px 21px;
  color: #00a4ff
  }
  </style>
   
  <title>纯CSS 单/复选框 美化</title>
  </head>
  <body>
   
  请选择iPhone 型号
   
  <div class="RadioStyle">
  <div class="Block PaddingL">
  <input type="radio" name="Storage" id="model1" />
  <label for="model1">iPhone 6s</label>
  <input type="radio" name="Storage" id="model2" />
  <label for="model2">iPhone 6s Plus</label>
  <input type="radio" name="Storage" id="model3" />
  <label for="model3">iPhone 7</label>
  <input type="radio" name="Storage" id="model4" checked />
  <label for="model4">iPhone 7 Plus</label>
  </div>
  </div>
   
  <div class="clear"></div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  选择兴趣爱好
   
  <div class="RadioStyle">
  <div class="Block PaddingL">
  <input type="checkbox" id="love1" />
  <label for="love1"></label>
  <input type="checkbox" id="love2" />
  <label for="love2">绘画</label>
  <input type="checkbox" id="love3" />
  <label for="love3">摄影</label>
  <input type="checkbox" id="love4" checked />
  <label for="love4">骑行</label>
  </div>
  </div>
   
  <div class="clear"></div>
   
  原理在这里 input:checked + label
  </body>
  </html>

顶一下
(0)
0%
踩一下
(0)
0%
标签: css前端
分享:
 
QQ在线咨询