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