css label

作者：屰兲洏垳＆发布日期:2025-09-22 浏览:30

<!-- HTML部分 -->
<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
</form>

<!-- CSS部分 -->
<style>
/* 设置 label 的样式 */
label {
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

/* 当 input 获得焦点时，label 改变颜色 */
input:focus + label::after {
  content: " *";
  color: red;
}
</style>

解释说明：

HTML部分：我们创建了一个简单的表单，包含一个 label 和一个 input 元素。label 的 for 属性与 input 的 id 属性相匹配，这样点击 label 时会自动聚焦到对应的 input 上。
CSS部分：
- 我们为 label 添加了一些基本的样式，比如字体加粗和颜色设置。
- 使用了相邻兄弟选择器 (+) 和伪元素 (::after) 来实现当 input 获得焦点时，在 label 后面添加一个红色的星号 (*) 提示用户该字段已获得焦点。

如果需要进一步调整或有其他问题，欢迎继续提问！

上一篇：markdown css

下一篇：css文字超长显示...