CSS 中的活动伪类在表单文本区域中不起作用

简介

在 CSS 中，伪类是用来向选择器指定特殊的状态的关键字。活动伪类是我们经常使用的一种伪类，它可以用来对鼠标在元素上的操作进行响应，比如 hover、active 等。

但是，你可能会发现，在表单文本区域中使用活动伪类并不起作用。比如想改变 input 文本框的颜色，使用以下样式：

input:hover {
    background-color: yellow;
}

然而当你在浏览器中测试时，会发现无法得到你想要的效果。

原因

这是因为表单元素本身就是一个交互性的元素，与其他元素不同，它们具有独立的用户代理样式，这些样式在大多数情况下优先于开发人员提供的样式。

具体来说，在文本区域中，用户代理样式表提供了以下样式：

input[type=text], input[type=password], textarea {
    -webkit-appearance: textfield;
    background-color: white;
    border: 1px solid gray;
    box-sizing: border-box;
    font: -webkit-small-control;
    font-size: 13px;
    height: 28px;
    outline: none;
}

它们的优先级比开发人员提供的样式表高，因此无法通过 CSS 活动伪类来改变它们的表现。

解决方案

解决此问题的方法有两个：

1. 使用 JavaScript

使用 JavaScript 可以通过事件来改变表单元素的样式。比如：

var input = document.getElementById('input');

input.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'yellow';
});

input.addEventListener('mouseout', function() {
    this.style.backgroundColor = 'white';
});

2. 使用 ::placeholder 伪元素

::placeholder 伪元素是用来设置输入框提示文本（placeholder）的样式的，但它也可以用来改变输入框本身的样式。示例代码如下：

input::-webkit-input-placeholder {
    background-color: yellow;
}

input::-moz-placeholder {
    background-color: yellow;
}

input:-moz-placeholder {
    background-color: yellow;
}

input:-ms-input-placeholder {
    background-color: yellow;
}

总结

表单元素本身就是一个交互性的元素，在使用 CSS 活动伪类时需要注意与其他元素不同，它们具有独立的用户代理样式，并且优先级比开发人员提供的样式表高。解决此问题的方法有两个，一是使用 JavaScript，二是使用 ::placeholder 伪元素。