css使用for属性美化radio控件

浏览量:374 美化radio控件

我们在使用radio,checkbox等控件的时候,需要对原有的样式进行美化,但是此类控件美化程度有限。

所以就出来了for属性,需要配置lable标签使用。

for 属性规定 label与哪个表单元素绑定,作用是 在点击label时会自动将焦点移动到绑定的元素上。

经常使用在radio和checkbox等input元素上。

<input type="radio" name="name" id="radio4" /><label for="radio4">男</label>

上述代码就把input和lable绑定起来了,for属性对应的是input的id值。

这样我们在点击label的时候,radio就会选中。

下图是我使用for属性和css相邻选择器美化了radio选择框:


代码如下(可直接复制运行):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="https://www.sammh.com/css/reset.css" rel="stylesheet" />
    <style>
        ul {
            margin-left: 200px;
            margin-top: 200px;
        }
        ul li{
            display:inline-block;
            margin-left:20px;
        }
        label {
            margin-right: 5px;
            border: 1px solid #4C70B1;
            border-radius: 100%;
            width: 20px;
            height: 20px;
            cursor: pointer;
            transition: ease 300ms;
            display:inline-block;
        }

        label:hover {
            border-color: #ccc;
            background-color: #4C70B1;
            box-shadow: 0 0 7px #ccc;
        }

        input[type=radio]:checked+label{
            background-color: #4C70B1;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <input type="radio" name="name" id="radio1" value="14" hidden /><label for="radio1"></label><span>男</span>
        </li>
        <li>
            <input type="radio" name="name" id="radio2" value="15" hidden /><label for="radio2"></label><span>女</span>
        </li>
        <li>
            <input type="radio" name="name" id="radio3" value="16" hidden /><label for="radio3"></label><span>人妖</span>
        </li>
    </ul>   
</body>
</html>


 

 

如无作者授权,请勿转载。

评论区:

昵称:
内容:
验证码:  9029

QQ群:477600139

今日头条:前端开发梦工厂

腾讯云社区:小明爱学习

微信公众号:霓虹国的佛系少年