Detectar se uma entrada possui texto usando CSS - em uma página que estou visitando e não controlo?

Existe uma maneira de detectar se uma entrada possui ou não texto via CSS? Eu tentei usar a :emptypseudo-classe e tentei usar [value=""], nenhuma das quais funcionou. Não consigo encontrar uma solução única para isso.

Eu imagino que isso deve ser possível, considerando que temos pseudo-classes para :checked, e :indeterminate, as quais são algo parecido.

Observe: estou fazendo isso para um estilo "Elegante" , que não pode utilizar JavaScript.

Observe também que o Stylish é usado, no lado do cliente, em páginas que o usuário não controla.

Elegante não pode fazer isso porque CSS não pode fazer isso. O CSS não possui (pseudo) seletores para <input>valor (es). Vejo:

• A especificação do seletor W3C
• Os seletores suportados pelo Mozilla / Firefox
• Tabela de suporte CSS3 entre navegadores

O :emptyseletor refere-se apenas a nós filhos, não a valores de entrada.
[value=""] faz o trabalho; mas apenas para o estado inicial . Isso ocorre porque o value atributo de um nó (que o CSS vê) não é o mesmo que a propriedade do nóvalue (Alterado pelo usuário ou pelo javascript do DOM e enviado como dados do formulário).

A menos que você se importe apenas com o estado inicial, você deve usar um userscript ou script Greasemonkey. Felizmente isso não é difícil. O script a seguir funcionará no Chrome ou Firefox com o Greasemonkey ou Scriptish instalado ou em qualquer navegador que suporte scripts de usuários (ou seja, a maioria dos navegadores, exceto o IE).

Veja uma demonstração dos limites do CSS mais a solução javascript nesta página jsBin .

// ==UserScript==
// @name     _Dynamically style inputs based on whether they are blank.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var inpsToMonitor = document.querySelectorAll (
    "form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1;  J >= 0;  --J) {
    inpsToMonitor[J].addEventListener ("change",    adjustStyling, false);
    inpsToMonitor[J].addEventListener ("keyup",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("focus",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("blur",      adjustStyling, false);
    inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    inpsToMonitor[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal  &&  inpVal.replace (/^\s+|\s+$/g, "") )
        zEvent.target.style.background = "lime";
    else
        zEvent.target.style.background = "inherit";
}

É possível, com as ressalvas usuais de CSS e se o código HTML pode ser modificado. Se você adicionar o requiredatributo ao elemento, o elemento corresponderá :invalidou :validse o valor do controle está vazio ou não. Se o elemento não tivervalue atributo (ou tem value=""), o valor do controle está inicialmente vazio e fica vazio quando qualquer caractere (mesmo um espaço) é inserido.

Exemplo:

<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>

As pseudo-classificadas :valide:invalid são definidas apenas nos documentos CSS do nível Working Draft, mas o suporte é bastante difundido nos navegadores, exceto que no IE, ele veio com o IE 10.

Se você deseja tornar “vazio” incluir valores que consistem apenas em espaços, é possível adicionar o atributo pattern=.*\S.* .

Atualmente, não existe um seletor de CSS para detectar diretamente se um controle de entrada tem um valor não vazio; portanto, precisamos fazê-lo indiretamente, conforme descrito acima.

Geralmente, os seletores de CSS se referem à marcação ou, em alguns casos, às propriedades do elemento definidas com scripts (JavaScript do lado do cliente), em vez de ações do usuário. Por exemplo, :emptycombina elemento com conteúdo vazio na marcação; todos os inputelementos são inevitavelmente vazios nesse sentido. O seletor [value=""]testa se o elemento tem o valueatributo na marcação e tem a cadeia vazia como seu valor. E :checkede :indeterminatesão coisas semelhantes. Eles não são afetados pela entrada real do usuário.

Você pode usar a :placeholder-shownpseudo classe. Tecnicamente, é necessário um espaço reservado, mas você pode usar um espaço.

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

<input onkeyup="this.setAttribute('value', this.value);" />

e

input[value=""]

vai funcionar :-)

edit: http://jsfiddle.net/XwZR2/

Basicamente, o que todo mundo está procurando é:

MENOS:

input:focus:required{
    &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
    &:valid,
    &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
}

CSS puro:

input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
input:focus:required:valid,
input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}

Você pode usar o placeholdertruque conforme escrito acima sem o requiredcampo.

O problema requiredé que, quando você escreveu algo e o excluiu - a entrada agora será sempre vermelha como parte da especificação HTML5 -, você precisará de um CSS conforme descrito acima para corrigi-lo / substituí-lo.

Você pode fazer coisas simples sem required

<input type="text" placeholder="filter here" id="mytest" />

CSS

#mytest:placeholder-shown {
/* if placeholder is shown - meaning - no value in input */
  border: black 1px solid;
  color: black;
}
#mytest {
  /* placeholder isn't shown - we have a value in input */
  border: red 1px solid;
  color: red;
}

Caneta de código: https://codepen.io/arlevi/pen/LBgXjZ

CSS simples:

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

Este código aplicará o css fornecido no carregamento da página se a entrada estiver preenchida.

Você pode definir input[type=text]um estilo diferente, dependendo de a entrada ter ou não texto estilizando o espaço reservado. Este não é um padrão oficial neste momento, mas possui amplo suporte ao navegador, embora com prefixos diferentes:

input[type=text] {
    color: red;
}
input[type=text]:-moz-placeholder {
    color: green;
}
input[type=text]::-moz-placeholder {
    color: green;
}
input[type=text]:-ms-input-placeholder {
    color: green;
}
input[type=text]::-webkit-input-placeholder {
    color: green;
}

Exemplo: http://fiddlesalad.com/scss/input-placeholder-css

Usando JS e CSS: não pseudoclasse

 input {
        font-size: 13px;
        padding: 5px;
        width: 100px;
    }

    input[value=""] {
        border: 2px solid #fa0000;
    }

    input:not([value=""]) {
        border: 2px solid #fafa00;
    }

<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />

   

O seletor válido fará o truque.

<input type="text" class="myText" required="required" />

.myText {
    //default style of input
}
.myText:valid {
    //style when input has text
}

Você pode aproveitar o espaço reservado e usar:

input:not(:placeholder-shown) {
  border: 1px solid red;
}

Truque simples com jQuery e CSS Assim:

JQuery:

$('input[value=""]').addClass('empty');
        $('input').keyup(function(){
            if( $(this).val() == ""){
                $(this).addClass("empty");
            }else{
                $(this).removeClass("empty");
            }
        });

CSS:

input.empty:valid{
        box-shadow: none;
        background-image: none;
        border: 1px solid #000;
    }

    input:invalid,
    input:required {
        box-shadow: 3px 1px 5px rgba(200, 0, 0, 0.85);
        border: 1px solid rgb(200,0,0);
    }




    input:valid{
        box-shadow: none;
        border: 1px solid #0f0;
    }

faça-o na parte HTML assim:

<input type="text" name="Example" placeholder="Example" required/>

O parâmetro necessário exigirá que haja texto no campo de entrada para ser válido.

Sim! você pode fazer isso com atributo básico simples com seletor de valor.

Use o seletor de atributos com valor em branco e aplique propriedades input[value='']

input[value=''] {
    background: red;
}

Isso não é possível com o css. Para implementar isso, você precisará usar JavaScript (por exemplo $("#input").val() == "").