请使用firefox,chrome等最新浏览器浏览本站。

组件美化- radio,checkbox

css3 阿豹 450次浏览 1个评论 扫描二维码

效果图:
QQ截图20160202182748
QQ截图20160202182827

index.html

 <label class="u-radio" for="agreeRadio">
     <input type="checkbox" id="agreeRadio" value="" class="agreeRadio"><span></span> I agree the rule
 </label>

sass

@mixin transform($transform){
      -webkit-transform: $transform;
      -moz-transform: $transform;
      -ms-transform: $transform;
      -o-transform: $transform;
      transform: $transform;
}
.u-radio,
.u-checkbox {
    height: 30px;
    line-height: 30px;
    color: #2d3859;
    font-size: 14px;
    display: inline-block;
    cursor: pointer;
    input {
        display: none;
        & + span {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #8f98b3;
            vertical-align: middle;
            border-radius: 2px;
            width: 16px;
            height: 16px;
            position: relative;
            margin-right:5px;
        }
        &:checked {
            & + span {
                border-color: transparent;
                background-color: #5782d9;
                &:after {
                    border-bottom: 2px solid #fff;
                    border-left: 2px solid #fff;
                    content: "";
                    height: 4px;
                    left: 3px;
                    position: absolute;
                    top: 4px;
                    width: 8px;
                    @include transform(rotate(-50deg));
                }
            }
        }
    }
}

喜欢 (9)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(1)个小伙伴在吐槽
  1. 年前再来转转!
    8082592016-02-03 09:17 回复