<? php echo "Post Blog"; ?>

Como validar com CSS se um input está preenchido

Sim, é possível, e há duas formas de fazer isso sem utilizar JavaScript. Veja como verificar ou validar com CSS se o input foi preenchido!

Como validar com CSS se um input está preenchido

Sim, é possível, e há duas formas de fazer isso sem utilizar JavaScript. Veja como verificar ou validar com CSS se o input foi preenchido com seletor :valid, :invalid e placeholder.

Seletor :valid e :invalid

O :valid do CSS serve para quando seu input tiver um valor válido.

No código abaixo, o uso do required torna obrigatório a inserção de texto no campo input. Quando tem texto, o input é válido, tornando acessível ao seletor :valid.

Quando não tem texto, e é obrigatório com required, também é possível usar o :invalid.

.meu-input { display: block; background-color: blue; } .meu-input:valid { background-color: red; }

Posso usar isso em quais navegadores?

Placeholders

Também é possível alcançar o mesmo resultado utilizando placeholders com um espaço dentro.

Dessa forma, o seletor :placeholder-shown irá detectar quando um placeholder está a mostra, isto é, quando há placeholder e ele não é vazio (!= “”) no elemento.

.meu-input { background-color: red; } .meu-input:placeholder-shown { background-color: blue; }

Posso usar isso em quais navegadores?

Leave a Reply

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Categorias

Posts recentes

  • All Post
  • Aplicativos
  • Bitcoin
  • Bootstrap
  • Criação de Sites
  • Criptomoedas
  • CryptoTab Browser
  • GDPR
  • Hospedagem de site
  • htaccess
  • JavaScript
  • jQuery
  • Lojas Virtuais
  • Marketing Digital
  • Notícias
  • PHP
  • Sistemas
  • Software
  • Vídeos
  • Wordpress
    •   Back
    • Abstract ROI
    • Ambient ROI
    • Literal ROI
    •   Back
    • Ajax
    •   Back
    • Bootstrap Table
    • SummerNote
    •   Back
    • Social Media
    • Landing Page
    • SEO
    • Marketing por E-mail
    • Facebook Ads
    • ROI
    • Business goals
    • Abstract ROI
    • Ambient ROI
    • Literal ROI
    •   Back
    • Inspiração
    • Design e UX
    • Html
    • CSS
    • Co-design
    • Fonts / Fontes
    • Web Design
    •   Back
    • Woocommerce
    • Meios de Pagamento
    •   Back
    • Para Designers
    •   Back
    • Plugin
    • Tema

Recreio dos Bandeirantes – Rio de Janeiro / RJ – Brasil

Serviços

Criação de Sistemas

Criação de Sites

Wordpress

Lojas virtuais

Clube de assinaturas

© 2013-2024 # Celula Nerd ® Brazilian Nerd on planet earth.

CELULA NERD SERVIÇOS DE INFORMATICA E INTERNET LTDA.
CNPJ 17.963.602/0001-47