label
表单(04)中。
label元素不会向用户呈现特殊效果。它是为鼠标用户改进可用性。如果在label元素内点击文本,就会触发此控件。
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #8e44ad;
margin: 0 auto;
margin-top: 100px;
}
input[name='tool-people']:focus~ .box{
background-color: #27ae60;
}
input[name='tool-people']{
opacity: 0;
}
</style>
</head>
<body>
<label for="tool-people">点击变色</label>
<input type="text" name="tool-people" id="tool-people">
<div class="box">
</div>
</body>
原来的颜色:
点击“点击变色"几个字后,颜色变化: