label 标签触发相关 input 的状态

作者: lio_zero | 来源:发表于2022-05-11 00:58 被阅读0次

input 元素的伪类 :hover 和 :active 也会在相关被悬停时被触发。

<label for="foo">Fooo</label>
<p>Some more content here</p>
<input id="foo">

#foo:hover {
  background: yellow;
}

在上面的例子中，当您将鼠标悬停在 label 标签上时，输入框将显示为黄色。

注意：我们在前面的文章说过，当您单击一个相关标签时，输入框上的单击处理程序也会被触发。

label 标签触发相关 input 的状态
input 元素的伪类 :hover 和 :active 也会在相关被悬停时被触发。在上面的例子中，当您将鼠标悬...
label和input绑定
label标签包裹input标签，点击label时，label两次响应，即label本身触发和input触发后冒泡...
美团面经总结
1.文件上传样式处理使用label标签点击，触发file类型的input，input可直接display: no...
Form表单练习
label 与 input label：标签，在表单中与 input 标签绑定使用。eg：1.显式联系 —— la...
HTML 表单之label标签介绍
转自：HTML 表单之label标签介绍label标签介绍label标签为input元素定义标注(标记)，它不会向...
利用纯CSS制作轮播图
做这种轮播图我们先要理解checked标签，label标签。 label: 标签为 input 元素定义标注（标记...
零碎知识点
用Label标签把input标签包裹起来的好处是：当鼠标点击label标签域时，鼠标自动聚焦到input，省去了f...
HTML+CSS3实现switch开关
input标签 CheckBox类型，label伪元素
HTML----第三次笔记
3.1label标签 label标签用于对input标签定义标注作用：用于绑定一个表单元素，当点击label时，...
1.label ~ input checkbox样式更改
选择器的运用 HTML 思路：input框让其display:none，运用label相关标记标签的属性来占位，自...