更改标签的字体系列
更改标签的字体系列
提问于 2017-06-01 17:31:31
请检查这个fiddle my fiddle (这里的代码只是一个原始代码，我的实际代码有一些引导类)
我在这里试图实现的是，每当用户单击输入框时，字体系列都会发生变化。
但不幸的是，只有当标签在输入之后时，它才起作用。我在许多其他的回答中都提到，没有css方法可以访问前面的元素。那么，对于下面的前两个字段，是否可以更改标签的字体系列呢
<html>
<head>
<style>
input:focus+label {
font-family: 'Roboto Medium', sans-serif;
font-size: 16px;
color: #000;
font-weight: 500;
}
</style>
</head>
<body>
<form>
<div>
<label for="name">username</label>
<input type="text" name="name">
</div>
<div>
<label for="email">email</label>
<input type="email" name="email">
</div>
<br><br>
<input type="text" name="color">
<label for="color">your fav color</label>
</form>
</body>
</html>
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-06-01 19:04:19
最简单的方法是在标记中交换它们，然后浮动label的左边。
这样，同级选择器+就可以工作了，因为input在标记中位于label之前
.swap label {
float: left;
}
input:focus+label {
font-family: 'Roboto Medium', sans-serif;
font-size: 16px;
color: #000;
font-weight: 500;
}<form>
<div class="swap">
<input type="text" name="name">
<label for="name">username</label>
</div>
<div class="swap">
<input type="email" name="email">
<label for="email">email</label>
</div>
<br>
<br>
<input type="text" name="color">
<label for="color">your fav color</label>
</form>
您也可以使用绝对位置，填充，然后将label放在上面..
.swap {
position: relative;
padding-top: 20px;
}
.swap + .swap {
margin-top: 5px;
}
.swap label {
position: absolute;
left: 0;
top: 0;
}
input:focus+label {
font-family: 'Roboto Medium', sans-serif;
font-size: 16px;
color: #000;
font-weight: 500;
}<form>
<div class="swap">
<input type="text" name="name">
<label for="name">username</label>
</div>
<div class="swap">
<input type="email" name="email">
<label for="email">email</label>
</div>
<br>
<br>
<input type="text" name="color">
<label for="color">your fav color</label>
</form>
..or left
.swap {
position: relative;
padding-left: 80px;
}
.swap + .swap {
margin-top: 5px;
}
.swap label {
position: absolute;
left: 0;
}
input:focus+label {
font-family: 'Roboto Medium', sans-serif;
font-size: 16px;
color: #000;
font-weight: 500;
}<form>
<div class="swap">
<input type="text" name="name">
<label for="name">username</label>
</div>
<div class="swap">
<input type="email" name="email">
<label for="email">email</label>
</div>
<br>
<br>
<input type="text" name="color">
<label for="color">your fav color</label>
</form>
Stack Overflow用户
发布于 2017-06-01 17:50:05
不幸的是，css中没有前置选择器。如果您的目标浏览器支持flexbox，就可以做到这一点。
HTML
<form>
<div class="some-container">
<input type="text" name="name">
<label for="name">username</label>
</div>
<div class="some-container">
<input type="email" name="email">
<label for="email">email</label>
</div>
<br><br>
<input type="text" name="color">
<label for="color">your fav color</label>
</form>CSS
.some-container {
display: flex;
align-items:center
}
.some-container label {
order: 1;
margin-right:10px;
}
.some-container input {
order: 2;
width:200px;
}
.some-container input:focus + label {
font-family: 'Roboto Medium', sans-serif;
font-size: 16px;
color: #000;
font-weight: 500;
}Stack Overflow用户
发布于 2017-06-01 18:03:03
在CSS中不能将焦点放在上一个元素上。可以使用JavaScript处理。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44303768
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号