Это не сработает, потому что селектора атрибутов «соответствуют элементам, которые имеют определенные атрибуты, определенные в исходном документе» (Attribute selectors in CSS 2.1). На самом деле все немного сложнее, потому что вызов setAttribute('value','password')
в элементе input
вызывает совпадение во многих браузерах (а не в IE). Но это не имеет значения, если вы не используете JavaScript.
Существует, однако, косвенный путь, хотя в настоящее время он в основном теоретический, из-за ограниченной поддержки браузеров и осложнений в реализации. Вы могли бы написать:
<style>
input:valid { border: 1px solid red; }
</style>
<input pattern=password id=x>
Это использует HTML5 pattern
атрибут, в этом случае, указав регулярное выражение, которое является просто фиксированной строкой, без маски, и the CSS3 Basic UI:valid
псевдо-класс, который проверяет, соответствует ли состояние удовлетворяет ограничениям валидности элемента , Это не подходит для нормального использования (например, без поддержки в IE 9), но в особых ситуациях в контролируемых средах такие вещи могут быть полезными.
Однако браузеры, поддерживающие такие функции, как правило, имеют собственные сообщения об ошибках достоверности, например, специальный цвет вокруг окна, когда значение является недопустимым, и я не думаю, что вы можете изменить его в CSS. JavaScript может помочь, но ... Таким образом, отчетность может противоречить вашим целям здесь. Более того, кажется, что браузеры, поддерживающие эти функции, рассматривают состояние элемента как действительные, когда поле пусто. Это странно, и мы пытаемся обойти это, сделав вход обязательным (атрибут HTML5 required
), похоже, открывают новые банки червей, а не исправляют. Но, возможно, в некоторых случаях вы можете использовать только некоторое начальное значение, например value="?"
, что ожидается, что пользователь заменит этот вход.