什么是label标签?
在 HTML 中,label 元素用于为表单元素(form elements)定义标注。label 元素可以为所有的表单元素(input、select、textarea等)增加可点击的关联,并且当用户点击 label 元素标签时,浏览器会自动将焦点转到和标签相关联的表单元素上,从而提高用户的体验。
如何设置label标签的颜色?
方式一:使用CSS样式表
可以使用 CSS 样式表来设置 label 标签的颜色。
<!DOCTYPE html>
<html>
<head>
<style>
label {
color: red;
}
</style>
</head>
<body>
<form>
<label for="username">用户名:</label>
<input type="text" id="username"><br><br>
<label for="password">密 码:</label>
<input type="password" id="password"><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
通过 CSS 样式表的设置,我们在页面上设置了 label 标签的文本颜色为红色。
方式二:使用内嵌样式表
除了使用外部 CSS 样式表来设置标签的样式,还可以使用内嵌样式表 inline style 属性来设置。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<label style="color: blue;" for="username">用户名:</label>
<input type="text" id="username"><br><br>
<label style="color: blue;" for="password">密 码:</label>
<input type="password" id="password"><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
使用内嵌样式表为 label 标签设置颜色,只需要在 label 元素上使用 style 属性,用 CSS 属性 color 来设置颜色值。
方式三:使用JavaScript
通过使用 JavaScript,我们可以实现在用户输入框内输入内容后,输入框变化颜色的效果。
<!DOCTYPE html>
<html>
<head>
<script>
function inputFocus(obj){
obj.style.background = "#FFFFCC";
obj.style.color = "#000";
}
function inputBlur(obj){
obj.style.background = "#FFF";
obj.style.color = "#000";
}
</script>
</head>
<body>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" onfocus="inputFocus(this)" onblur="inputBlur(this)"><br><br>
<label for="password">密 码:</label>
<input type="password" id="password" onfocus="inputFocus(this)" onblur="inputBlur(this)"><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
当用户在输入框内输入内容时,输入框的背景色和字体颜色都会改变。
结论
在 HTML 中,我们可以通过多种方式来设定 label 标签的颜色。可以使用外部样式表和内嵌样式表,也可以使用 JavaScript 来实现效果。根据需求选择不同的方案即可。