码迷,mamicode.com
首页 > Web开发 > 详细

纯css radio button样式

时间:2020-05-25 13:57:49      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:value   line   bsp   his   order   edit   span   back   isa   

 <div class="inRadio RadioStyle">
                  <input type="radio" checked onclick="editWareHouseIt(this)" id="editOrInsHouse01"
                     name="editOrInsHouse" value="01">
                  <label for="editOrInsHouse01">按钮一</label>
                  <input type="radio" onclick="editWareHouseIt(this)" id="editOrInsHouse02" name="editOrInsHouse"
                     value="02">
                  <label for="editOrInsHouse02">按钮二</label>
               </div>
.RadioStyle input {
  display: none
}

.RadioStyle label {
  border: 1px solid #00a4ff;
  color: #fff;
  line-height: 28px;
  min-width: 80px;
  text-align: center;
  float: left;
  font-size: 10px;
  border-radius: 4px
}

.RadioStyle input:checked+label {
  border: 1px solid #00a4ff;
  background-size: 21px 21px;
  color: #fff;
  background-color: #00a4ff;
}

.RadioStyle input:disabled+label {
  opacity: 0.7;
}

 

纯css radio button样式

标签:value   line   bsp   his   order   edit   span   back   isa   

原文地址:https://www.cnblogs.com/goPush/p/12956454.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!