自定义 input checkbox/radio的样式

1.radio style

.choose {
        position: relative;
    }

    .choose .radio {
        position: relative;
        display: inline-block;
        font-weight: 400;
        padding-left: 25px;
        cursor: pointer;
    }

    .choose .radio input {
        position: absolute;
        left: -9999px;
    }

    .choose .radio i {
        display: block;
        position: absolute;
        top: 6px;
        left: 0;
        width: 15px;
        height: 15px;
        outline: 0;
        border: 1px solid #c8c8c8;
        background: #ffffff;
        border-radius: 50%;
        transition: border-color .3s;
        -webkit-transition: border-color .3s;
    }

    .choose .radio input + i:after {
        position: absolute;
        content: '';
        top: 3px;
        left: 3px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #2db3c4;
        opacity: 0;
        transition: opacity .1s;
        -webkit-transition: opacity .1s;
    }

    .choose .radio input:checked + i:after {
        opacity: 1;
    }

div引用

<p class="choose">
      <label class="radio">
             <input type="radio" name=" value="A" autocomplete="off">
             <i></i>
             <span >A、</span>
      </label>
</p>

样式：

2.checkbox  style

/*checkbox*/
.chk { 
    display: none; 
} 
 
.chk + label { 
    background-color: #FFF; 
    border: 1px solid #aaa; 
    width:15px;
    height:15px;
    box-shadow: none; 
    border-radius: 2px; 
    display: inline-block; 
    position: relative; 
    margin: auto 5px;
    vertical-align: sub;
    cursor:pointer;
} 
.chk + label:active { 
    box-shadow: 0; 
} 
 
.chk:checked + label {  
    border: 1px solid #aaa; 
    box-shadow: none; 
    color: #aaa; 
} 
 
.chk:checked + label:after { 
    content: '√'; /*勾选符号2714*/ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    color: #21ae79; 
    width: 100%; 
    text-align: center; 
    font-size: 12px; 
    padding: 0 0 1px 0; 
    vertical-align: middle; 
} 

html 引用

<div class="form-group">
	<input type="checkbox" class="chk" id="chk">
	<label for="chk"></label>
</div>

最终样式：