纯css修改radio样式

<!DOCTYPE html>
<html>
<head>
    <title>radio demo</title>
    <style>
        div,ul,li {
            padding: 0;
            margin: 0;
        }
        li {
            position: relative;
            height: 30px;
            margin-bottom: 10px;
        }
        .my-radio {
            position: relative;
            z-index: 1;
        }
        .my-radio:checked::after {
            content: ‘‘;
        }
        .my-radio::before {
            content: ‘‘;
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #fff;
            border: 2px solid blue;
        }
        .my-radio::after {
            position: absolute;
            top: 4px;
            left: 4px;
            background-color: blue;
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        .radio-label {
            display: inline-block;
            border: 1px solid blue;
            width: 100px;
            height: 30px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .my-radio:checked + .radio-label {
            border-color: red;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <p style="color: red;">注:这里如果radio加id,label标签for属性指向id则可以点击label是radio触发</p>
    <p style="color: red;">如果不通过id来关联,则是需要直接点击radio才产生效果</p>
    <ul>
        <li>
            <input type="radio" id="radio1" class="my-radio" name="demo" />
            <label class="radio-label" for="radio1"></label>
        </li>
        <li>
            <input type="radio" id="radio2" class="my-radio" name="demo" />
            <label class="radio-label" for="radio2"></label>
        </li>
        <li>
            <input type="radio" id="radio3" class="my-radio" name="demo" />
            <label class="radio-label" for="radio3"></label>
        </li>
        <li>
            <input type="radio" id="radio4" class="my-radio" name="demo" />
            <label class="radio-label" for="radio4"></label>
        </li>
        <li>
            <input type="radio" id="radio5" class="my-radio" name="demo" />
            <label class="radio-label" for="radio5"></label>
        </li>
    </ul>
</body>
</html>

  效果如下:

radio demo

注:这里如果radio加id,label标签for属性指向id则可以点击label是radio触发

如果不通过id来关联,则是需要直接点击radio才产生效果

原文地址:https://www.cnblogs.com/guxingzhe/p/12217213.html

时间: 2024-10-07 10:10:25

纯css修改radio样式的相关文章

使用CSS修改radio样式

1,第一种样式: <label> <input class="radio_type" type="radio"/>免费</label> <label> <input class="radio_type" type="radio" />积分</label> <label> <input class="radio_type"

用纯CSS美化radio和checkbox

Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:magic-check 在CSS出现之前,我们美化radio和checkbox需要借助JavaScript,最具代表性的就是icheck,它功能强大复杂并且主题很多.icheck这种美化方案很好很强大,但是也有很多缺点: 太重,需要引入JS.CSS,还有图片或者字体图标,而且还依赖jQuery 扩展性差,

纯css修改下拉列表select的默认样式

select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> <option value="芝士">芝士</option> <option value="奶油">奶油</option> </select> </div> 给select添加父元素div目的是为了,

纯css修改单选、复选按钮样式

只支持IE9及以上 html <label><input class="radio" type="radio" name="radio1"/><span class="radio-style"></span>10</label> <label><input class="radio" type="checkbox&quo

纯CSS修改checkbox复选框样式

借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box_inner1{ width: 25px; margin: 20px 100px; /*最外层盒子的外边距, 可自己调*/ position:

纯CSS让radio实现点击显示隐藏效果

—————————————————————————————————————————————————————————————————— ———————————————————————————————————————————————————————————————————— ———————————————————————————————————————————————————————————————————— html <style> #faq input[type='radio']{ displ

css修改滚动条样式

<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="height:400px;">这里是内容222</p> <p>这里是内容333</p> </div> </div> css .in

CSS修改Autocomplete样式

举个场景:在用户登录成功的时候,浏览器有时候会咨询你是否记住密码,当你记住密码下次登录的时候,标签会自动填充,但是这样会造成样式不统一,解决办法如下: input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea

css 修改placeholder样式

input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:red; } input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:red; } input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:red; }