: espaço reservado mostrado - CSS-Tricks

Anonim

A :placeholder-shownpseudoclasse seleciona o próprio elemento de entrada quando existe um texto de espaço reservado em uma entrada de formulário. Pense nisso como uma boa maneira de distinguir entre as entradas que estão exibindo o texto de espaço reservado e aquelas que não estão.

input:placeholder-shown ( border: 5px solid red; )

A ideia por trás dos marcadores

Os programas baseados em texto e a entrada podem ter texto de espaço reservado. É o texto que é mostrado quando a entrada está vazia, para sugerir um valor possível. Por exemplo, um formulário solicitando uma escola pode ter um rótulo para o que está pedindo, mas então sugerir “Forest Hills Example High School” no espaço reservado como um valor de exemplo:

School Name:

A diferença entre :placeholder-showne::placeholder

:placeholder-shownserve para selecionar a própria entrada quando seu texto de espaço reservado está sendo mostrado. Ao contrário de ::placeholderquais estilos o texto do espaço reservado.

Aqui está um diagrama:

Achei isso muito confuso porque:

  1. as especificações só têm :placeholder-showne não::placeholder
  2. :placeholder-shown ainda pode afetar o estilo do texto do espaço reservado, uma vez que é um elemento pai (por exemplo, tamanho da fonte).

Note-se que :placeholder-showné um pseudo- classe (é um elemento em um determinado estado) e ::placeholderé um pseudo- elemento (a coisa visível que não é realmente no DOM). Distinguível por dois pontos simples versus duplos.

Tab Atkins esclareceu para mim por e-mail:

:placeholder-shown, sendo uma pseudo-classe, tem que selecionar um elemento existente. Ele seleciona a entrada sempre que você está no estado de exibição de espaço reservado. O ::placeholderpseudo-elemento envolve o texto real do espaço reservado.

Se você precisar estilizar o texto do espaço reservado

Use ::placeholder (na verdade, use todos os prefixos malucos de fornecedores para isso) que detalhamos no Almanaque aqui.

Mais Informações

  • Especificação de nível 4 dos seletores

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
47 51 11 * 79 9

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 9,0-9,2