为了账号安全,请及时绑定邮箱和手机立即绑定

checkbox/radio自定义样式

2019.11.06 16:10 3696浏览

效果图:

图片描述

HTML部分:

<table>
    <tr>
        <td>
            <div class="checkbox-custom">
                <input type="checkbox" />
                <label></label>
            </div>
        </td>
        <td>
            <div class="radio-custom">
                <input type="radio" class="radius-50" />
                <label></label>
            </div>
        </td>
    </tr>
</table>

CSS部分:

table tr th, table tr td {
    border: 1px solid #ccc;
    padding: 20px;
}

table {
    width: 200px;
    text-align: center;
    border-collapse: collapse;
}

.checkbox-custom , .radio-custom {
    position: relative;
}

.checkbox-custom input[type=checkbox], .radio-custom input[type=radio] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-appearance: none;
    background: transparent;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    vertical-align: middle;
}

.checkbox-custom .radius-50, .radio-custom .radius-50 {
    border-radius: 50%;
}

.checkbox-custom input[type=checkbox]:checked , .radio-custom input[type=radio]:checked {
    border-color: #ff6435;
    background: #ff6435;
}

.checkbox-custom input[type=checkbox]:checked:after, .radio-custom input[type=radio]:checked:after {
    content: '';
    position: absolute;
    left: 3px;
    top: 4px;
    width: 10px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消