专栏首页smh的技术文章css使用for属性美化radio控件

css使用for属性美化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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript中的变量提升的简单说明

    两个输出都是undefined。为什么呢?这就要从js中变量的提升和函数作用域来说起了。

    小明爱学习
  • canvas绘制图形时beginPath应用

    当我们在使用canvas绘制图形的时候,不免都会使用到beginPath这个方法。今天我们就来讲解一下这个函数的重要性以及应用。

    小明爱学习
  • 二进制源码和补码的基础解释

    我们知道,计算机最终处理的都是0和1的二进制的数据,二进制又分为有符号数和无符号数,今天就带你们详细了解一下。我会以代码为例子让各位更清晰的明白,所用语言为C#...

    小明爱学习
  • 饼状图

    onety码生
  • struts2关于action拦截器使用方法 现记录如下

    struts2关于action拦截器使用方法 现记录如下 以便将来取用 struts2 与spring与hibernate整合 struts2中拦截actio...

    Java帮帮
  • Python--format()学习记录

    填充与对齐 填充常跟对齐一起使用 ^、<、>分别是居中、左对齐、右对齐,后面带宽度 :号后面带填充的字符,只能是一个字符,不指定的话默认是用空格填充 比如

    明天依旧可好
  • html+css+JavaScript例题

    端碗吹水
  • 二叉树的非递归深度遍历

    week
  • 《css大法》之使用伪元素实现超实用的图标库(附源码

    今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。

    徐小夕
  • 基于LSTM的比特币价格预测模型(系列1)

    设计并训练由输入/训练数据(比特币价格时间序列/60min)驱动的LSTM,预测一小时内的比特币价格,从而在整个测试数据样本中实现真实价格和预测价格之间的最小均...

    量化投资与机器学习微信公众号

扫码关注云+社区

领取腾讯云代金券