ti-enxame.com

Combinando uma caixa de entrada vazia usando CSS

Como aplico um estilo a uma caixa de entrada vazia? Se o usuário digitar algo no campo de entrada, o estilo não deverá mais ser aplicado. Isso é possível em CSS? Eu tentei isso:

input[value=""]
113
Sjoerd

Se apenas o campo for required, você poderia ir com input:valid

#foo-thing:valid + .msg { visibility: visible!important; }      
 <input type="text" id="foo-thing" required="required">
 <span class="msg" style="visibility: hidden;">Yay not empty</span>

Veja ao vivo no jsFiddle

OU negar usando #foo-thing:invalid (crédito para @SamGoody)

141
lukmdo

Nos navegadores modernos, você pode usar :placeholder-shown para direcionar a entrada vazia (não confunda com ::placeholder).

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

Mais informações e suporte ao navegador: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

111
Berend

Não há seletor no CSS que faça isso. Os seletores de atributo correspondem aos valores do atributo, não aos valores calculados.

Você teria que usar JavaScript.

43
Quentin

Atualizar o valor de um campo não atualiza seu atributo de valor no DOM, e é por isso que seu seletor sempre corresponde a um campo, mesmo quando não está realmente vazio.

Em vez disso, use a invalidpseudo-class para obter o que você deseja, assim:

input:required {
  border: 1px solid green;
}
input:required:invalid {
  border: 1px solid red;
}
<input required type="text" value="">

<input required type="text" value="Value">
16
Shaggy

input[value=""], input:not([value])

funciona com:

<input type="text" />
<input type="text" value="" />

Mas o estilo não mudará assim que alguém começar a digitar (você precisa de JS para isso).

15
Draco Ater

Se não for necessário suportar navegadores legados, você poderá usar uma combinação de required, valid e invalid.

O bom de usar isso é que os pseudo-elementos valid e invalid funcionam bem com os atributos type dos campos de entrada. Por exemplo:

input:invalid, textarea:invalid { 
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

input:valid, textarea:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
<input type="email" name="email" placeholder="[email protected]" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

Para referência, JSFiddle aqui: http://jsfiddle.net/0sf6m46j/

9
My Stack Overfloweth
$('input#edit-keys-1').blur(function(){
    tmpval = $(this).val();
    if(tmpval == '') {
        $(this).addClass('empty');
        $(this).removeClass('not-empty');
    } else {
        $(this).addClass('not-empty');
        $(this).removeClass('empty');
    }
});

em jQuery. Eu adicionei uma classe e estilo com css.

.empty { background:none; }
5
Israel Morales

Isso funcionou para mim:

html: - adiciona atributo requerido ao elemento input

<input class="my-input-element" type="text" placeholder="" required />

css: - use: seletor inválido

input.my-input-element:invalid {

}

Notas:

  • valor no elemento de entrada não é necessário.
  • Sobre obrigatório de w3Schools.com , "Quando presente, especifica que um campo de entrada deve ser preenchido antes de enviar o formulário."
3
Ariella

Esta pergunta pode ter sido feita há algum tempo, mas como recentemente eu cheguei neste tópico procurando por validação de formulário do lado do cliente, e como o :placeholder-shownsupport está ficando melhor, eu pensei que o seguinte poderia ajudar outros.

Usando Berend idéia de usar essa pseudo-classe CSS4, consegui criar uma validação de formulário apenas acionada após o usuário terminar de preenchê-la.

Aqui está o ademo e a explicação no CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

2
Johan M.

Eu me pergunto por respostas temos claro atributo para obter caixas de entrada vazias, dê uma olhada neste código

/*empty input*/
input:empty{
    border-color: red;
}
/*input with value*/
input:not(:empty){
    border-color: black;
}

UPDATE

input, select, textarea {
    border-color: @green;
    &:empty {
        border-color: @red;
    }
}

Mais over para ter uma ótima aparência na validação

 input, select, textarea {
    &[aria-invalid="true"] {
        border-color: amber !important;
    }

    &[aria-invalid="false"], &.valid {
        border-color: green !important;
    }
}
0
Nasser Hadjloo