css 更改input radio checkbox的样式

html

<label>
      <input type="checkbox" class="colored-blue">
      <span class="text">GC-高铁/城际</span>
</label>

css

;;
    width:;}
input[type=checkbox] ~ .text, input[type=radio] ~ .text{;
    display:;line-height: 20px;min-height: 18px;min-width: 18px;
    font-weight: normal;}
input[type=checkbox] ~ .text:before, input[type=radio] ~ .text:before{font-family: fontAwesome;
    font-weight: bold;font-size: 13px;color: #333;content: " ";background-color: #fafafa;
    border:;display: inline-block;
    text-align: center;vertical-align: middle;height: 18px;line-height: 16px;min-width: 18px;margin-right: 5px;
    margin-bottom: 2px;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;
    transition: all .3s ease;}
input[type=checkbox].colored-blue:checked ~ .text, input[type=radio].colored-blue:checked ~ .text{}
input[type=checkbox]:checked ~ .text:before, input[type=radio]:checked ~ .text:before{
display: inline-block;content: '';background-color: #f5f8fc;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
    box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
    border-color: #333;}

最终效果