Pseudo-elemento CSS input-placeholder :: after para mostrar com ou sem valor na caixa de texto
Estou tentando obter algumas sinalizações da interface do usuário nos elementos do formulário para o usuário após a validação funcionar usando os pseudo elementos do espaço reservado (começando pelas caixas de texto). O que eu quero é o::input-placeholder::after
pseudo elemento a ser mostrado quando houver um valor na caixa de texto e também quando não houver um valor na caixa de texto (por exemplo, quando um valor inválido estiver presente ou quando um valor for necessário - deve aparecer o vermelho "X "na extremidade direita da caixa de texto através do::input-placeholder::after
pseudoelemento).
Aqui está o violino:https://jsfiddle.net/edsinek/L8u7s25d/
Aqui está um trecho do CSS que estou usando para mostrar o "X" para um valor inválido:
.input-invalid input[type=text]::-webkit-input-placeholder::after {
content: "\2716"; // "X"
font-size: 18px;
color: #ff0000;
padding-right: 0;
float: right;
}
Nota: no momento, estou apenas codificando para o Chrome, então perdoe as coisas específicas do kit da web.
Alguma ideia? Ou isso é algo que não é possível e depende da UA?