bootstrap css自定义radio样式

发布时间:2019-04-30作者:小灵龙点击:99


问题描述:

     对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一。多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="radio"] 一起使用。当<label>元素与单选按钮关联之后,也可以起到触发开关的作用。

解决办法:

在bootstrap中,sr-only是隐藏元素。然后给label标签设置宽高,对齐,颜色。最后设置点击事件。


    <div class="form-group">

       <label>独立后台:</label>

      <label class="yes"> 是

       <input type="radio" name="yes" class="form-control sr-only">
          </label>

      <label class="no">
       <input type="radio" name="yes" class="form-control sr-only"> 否

      </label>

    </div>



  .form-group .no{

    background-color: #AAAAAA;

    border:1px solid #C0C0C0;

    width: 50px;

    height: 30px;

    text-align: center;

    vertical-align: middle;

    line-height: 30px;

    cursor: pointer;

}

标签:radio样式,bootstrap