CSS input:not(:placeholder-shown) ~ label选择器在自动填充情况下不起作用

在本文中，我们将介绍一个在自动填充情况下不起作用的CSS选择器，即input:not(:placeholder-shown) ~ label。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

问题描述

在CSS中，我们经常使用选择器来选择和样式化特定的元素。例如，我们可以使用input:focus选择器来选择被激活的输入框。然而，在某些情况下，我们希望样式化的是输入框中有内容的情况，而不是只有placeholder显示的情况。为了实现这一点，我们可以使用input:not(:placeholder-shown)来选择非placeholder显示的输入框，并通过~选择器来选择其后的label标签。然而，当涉及到自动填充时，这个选择器可能无法正常工作。

自动填充的问题

在很多网站上，浏览器会自动填充用户之前输入过的数据。这在提高用户体验的同时也带来了一些问题。对于使用input:not(:placeholder-shown) ~ label选择器样式化输入框标签的网站来说，自动填充不起作用。

示例代码如下：

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

<style>
  input:not(:placeholder-shown) ~ label {
    color: red;
  }
</style>

在上面的例子中，当用户输入用户名后，label标签的颜色将变为红色。但是，如果浏览器自动填充用户名，即使输入框中有内容，选择器也不会生效。

解决方法

虽然input:not(:placeholder-shown) ~ label选择器在自动填充情况下不起作用，但我们仍然可以采取其他方法来解决这个问题。一种方法是使用JavaScript来检测输入框的值，并相应地添加或移除类来改变标签的样式。

示例代码如下：

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

<style>
  .filled-label {
    color: red;
  }
</style>

<script>
  const input = document.getElementById("username");
  const label = document.querySelector("label[for='username']");

  input.addEventListener("input", function() {
    if (input.value) {
      label.classList.add("filled-label");
    } else {
      label.classList.remove("filled-label");
    }
  });
</script>

在上面的例子中，我们使用JavaScript监听输入框的输入事件。当输入框的值不为空时，我们将为label标签添加一个名为”filled-label”的类，从而改变标签的样式。

总结

在本文中，我们讨论了CSS选择器input:not(:placeholder-shown) ~ label在自动填充情况下不起作用的问题，并提供了一种使用JavaScript来解决该问题的方法。尽管选择器无法直接解决这个问题，但通过使用其他技术，我们仍然可以实现所需的样式化效果。使用好CSS选择器的同时，我们也应该灵活运用其他技术来解决可能遇到的问题。