html - 使用CSS通过按标签聚焦输入

标签 html css

所以问题是这样的,如何通过仅使用 css 按下用户输入区域附近的标签来使用户输入区域聚焦?

示例: 用户名:某个文本框

*按下“用户名”文本会将焦点引导至文本框。

最佳答案

input:focus {
  outline: 0;
  border-bottom: 2px solid tomato;
}
input {
  border: 0;
  height: 30px;
  padding: 0 5px;
  border-bottom: 2px solid lightgrey;
}
<p>First method simply wrap input with label</p>

<label>Username
  <input type="text" placeholder="username">
</label>

<p>Second method by for and id if they are two seprate elements</p>

<label for="username">Username</label>
<input type="text" placeholder="username" id="username">

关于html - 使用CSS通过按标签聚焦输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30012984/

相关文章:

javascript - 根据文本选择元素

html - 如何在 textarea 元素中添加新行?

html - 保持在事件 div 上的 CSS 底部边框悬停效果

css - -webkit-line-clamp 在放大或缩小时显示部分切断最后一行

html - 在顶部图像上居中垂直图像

javascript - Bootstrap Accordion - 页面先跳到底部然后转到顶部问题

jquery - 灵活的 Div 高度和宽度

css - 带有列表图标的 RTL

javascript - bodymovin translateZ();

javascript - 使用变换 : scale is not appropriately hiding a div