美文网首页前端大杂烩
【radio】css优化原生组件之单选

【radio】css优化原生组件之单选

作者: 写写而已 | 来源:发表于2019-10-08 18:36 被阅读0次
GIF.gif
关键点是+号选择器,其他选择器学习可以参考这个CSS 选择器参考手册
css样式文件奉上
ul,li{
    list-style: none;
}
/*取紧邻input的下一个label*/
input+label{
    width: 14px;height: 14px;display: inline-block;
    border: 1px solid #189cfb;border-radius: 50%;
    text-align: center;line-height: 12px;
    margin-right: 5px;
}
input{
    display: none;
}
input+label:after{
    transition: 0.3s;
    transform: scale(0.8);
    content: '';
    display: inline-block;
    width: 10px;height: 10px;border-radius: 50%;
    background-color: #fff;
}

input:checked+label:after{
    background-color: #189cfb;transform: scale(1);
}
li{
    display: flex;align-items: center;height: 46px;
}
label{
    cursor: pointer;font-size: 16px;
}
/*不可选中*/
input:disabled+label{
    border-color: #aaa;
}
input:disabled+label+label{
    color: #aaa;text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>【radio】css优化原生组件之单选</title>
</head>
<body>
<ul>
    <li>
        <input type="radio" disabled="true" name="sex" id="s3"><label for="s3"></label>
        <label for="s3">满100元可用</label>
    </li>
    <li>
        <input type="radio" name="sex" id="s1"><label for="s1"></label>
        <label for="s1">商家优惠套餐</label>
    </li>
    <li>
        <input type="radio" name="sex" id="s2"><label for="s2"></label>
        <label for="s2">下单立减5元优惠券</label>
    </li>
    <li>
        <input type="radio" name="sex" id="s4"><label for="s4"></label>
        <label for="s4">立享8折</label>
    </li>
</ul>
</body>
</html>

相关文章

网友评论

    本文标题:【radio】css优化原生组件之单选

    本文链接:https://www.haomeiwen.com/subject/mahipctx.html