11月9月label标签补充

label标签补充

当label与input标签一起使用的时候可以实现点击文字就能使用input标签的功能

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a:focus{
            background-color: red;
        }
    </style>
</head>
<body>
<form action=" "method="">
    <label for="a">姓名</label>
    <input type="text" id="a">
</form>
</body>
</html>

这个代码里面使用了伪元素的方法来给输入框添加了焦点时样式,然后给input的id赋值一个a的值,然后在绑定给label标签里面的for的,达到可以点击文字使用input框的功能

效果如下

posted @   scxlzb  阅读(5)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示