Question

请检查这个小提琴my fiddle（这里的代码只是一个原始代码，我的实际代码有一些引导类）

我想在这里实现的是，每当用户点击输入框时，字体系列就会发生变化。

但不幸的是，只有在输入之后标签才有用。我在SO中的许多其他答案中看到，提到没有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>

Answer 1

遗憾的是，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;
        }

https://jsfiddle.net/nithincharly/j96cnas2/

Answer 2

最简单的方法是在标记中交换它们然后浮动label左边

这样，兄弟选择器+将起作用，因为input位于标记中的label之前

＆＃13;

.swap label {
  float: left;
}

input:focus+label {
  font-family: 'Roboto Medium', sans-serif;
  font-size: 16px;
  color: #000;
  font-weight: 500;
}

＆＃13;

<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>

＆＃13;

你也可以使用绝对位置，填充，然后将label放在上面..

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

..或者离开

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

你无法将前一个元素集中在CSS中。可以用JavaScript处理。

更改标签的font-family

3 个答案: