CSS 自定义Radio样式

最新推荐文章于 2023-06-13 16:36:37 发布

Teln_小凯

最新推荐文章于 2023-06-13 16:36:37 发布

阅读量3.2k

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq873113580/article/details/122011737

版权

效果图

HTML代码

<table>
            <tr>
                <td style="font-weight: bold;">检查事项</td>
                <td style="text-align: center;width: 40px;">
                    <img style="width: 20px;" src="../../image/handover/y.png"/>
                </td>
                <td style="text-align: center;width: 40px;">
                    <img style="width: 20px;"  src="../../image/handover/x.png"/>
                </td>
            </tr>
            <tr>
                <td>非雷雨天气</td>
                <td style="text-align: center;width: 40px;">
                    <input type="radio" name="item1" id="item1_yes"/><label for="item1_yes"></label>
                </td>
                <td style="text-align: center;width: 40px;">
                    <input type="radio" name="item1" id="item1_no"/><label for="item1_no"></label>
                </td>
            </tr>
            <tr>
                <td>只会车辆停泊到位</td>
                <td style="text-align: center;width: 40px;">
                    <input type="radio" name="item2" id="item2_yes"/><label for="item2_yes"></label>
                </td>
                <td style="text-align: center;width: 40px;">
                    <input type="radio" name="item2" id="item2_no"/><label for="item2_no"></label>
                </td>
            </tr>
            <tr>
                <td>其他选项...</td>
                <td style="text-align: center;width: 40px;">
                    <input type="radio" name="item3" id="item3_yes"/><label for="item3_yes"></label>
                </td>
                <td style="text-align: center;width: 40px;">
                    <input type="radio" name="item3" id="item3_no"/><label for="item3_no"></label>
                </td>
            </tr>
        </table>

CSS代码

input[type="radio"] + label::before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height:  20px;
    border-radius: 30%;
    border: solid 1px #1259B7;
    margin-right: .213333rem;
    box-sizing: border-box;
	position: relative;
	top: -2px;
}
input[type="radio"]:checked + label::before {
    background-color: #30F546;
    background-clip: content-box;
    padding: 0px;
    box-sizing: border-box;
}
input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
input[id$="no"]:checked + label::before {
    background-color:#F76167;
    background-clip: content-box;
    padding: 0px;
    box-sizing: border-box;
}