收藏一个好看的单选多选样式

时间：2018-05-28 18:18:02 阅读：249 评论：0 收藏：0 [点我收藏+]

1.样式如图：

技术分享图片

2.上代码：

<html>
<head>
    <title>check test</title>
    <style type="text/css">
        .demo--label {
            margin: 20px 20px 0 0;
            display: inline-block
        }

        .demo--radio {
            display: none
        }

        .demo--radioInput {
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 100%;
            display: inline-block;
            height: 16px;
            margin-right: 10px;
            margin-top: -1px;
            vertical-align: middle;
            width: 16px;
            line-height: 1
        }

        .demo--radio:checked + .demo--radioInput:after {
            background-color: #57ad68;
            border-radius: 100%;
            content: "";
            display: inline-block;
            height: 12px;
            margin: 2px;
            width: 12px
        }

        .demo--checkbox.demo--radioInput, .demo--radio:checked + .demo--checkbox.demo--radioInput:after {
            border-radius: 0
        }
    </style>
</head>

<body>
<div>
    <p style="font-size:18px;margin-top:30px;color:rgba(0,0,0,0.44)">约吗?</p>
    <label class="demo--label">
        <input class="demo--radio" type="radio" name="demo-radio">
        <span class="demo--radioInput"></span>约
    </label>
    <label class="demo--label">
        <input class="demo--radio" type="radio" name="demo-radio">
        <span class="demo--radioInput"></span>不约，叔叔我们不约
    </label>
</div>
<div>
    <p style="font-size:18px;margin-top:30px;color:rgba(0,0,0,0.44)">你喜欢的电影明星是？</p>
    <label class="demo--label"><input class="demo--radio" type="checkbox" name="demo-checkbox1">
        <span class="demo--checkbox demo--radioInput"></span>苍井空
    </label>
    <label class="demo--label">
        <input class="demo--radio" type="checkbox" name="demo-checkbox2">
        <span class="demo--checkbox demo--radioInput"></span>波多野结衣
    </label>
    <label class="demo--label">
        <input class="demo--radio" type="checkbox" name="demo-checkbox3">
        <span class="demo--checkbox demo--radioInput"></span>罗玉凤
    </label>
</div>

</body>

</html>

注：本demo转载大神文章，代码内容未做更改。看技术，不要想太多。。。！

收藏一个好看的单选多选样式

原文：https://www.cnblogs.com/songjn/p/9101503.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)