Определить, есть ли во входных данных текст с помощью CSS на странице, которую я посещаю и не контролирую?

Stylish не может этого сделать, потому что CSS не может этого сделать. В CSS нет (псевдо) селекторов для значений <input>. См.:

• Спецификация селектора W3C
• Селекторы, поддерживаемые Mozilla / Firefox
• Кроссбраузерность, таблица поддержки CSS3

Селектор :empty относится только к дочерним узлам, а не к входным значениям.
[value=""] работает; но только для начального состояния. Это связано с тем, что value атрибут узла (который видит CSS) не совпадает с value свойством узла (изменено пользователем или Javascript DOM и отправлено как данные формы ).

Если вас не волнует только начальное состояние, вы должны использовать пользовательский скрипт или скрипт Greasemonkey. К счастью, это несложно. Следующий скрипт будет работать в Chrome или Firefox с установленным Greasemonkey или Scriptish, или в любом браузере, который поддерживает пользовательские скрипты (то есть в большинстве браузеров, кроме IE).

См. Демонстрацию ограничений CSS и решения javascript на этой странице 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";
}

Это возможно, с обычными оговорками CSS и если можно изменить код HTML. Если вы добавите атрибут required к элементу, тогда элемент будет соответствовать :invalid или :valid в зависимости от того, является ли значение элемента управления пустым или нет. Если элемент не имеет атрибута value (или имеет value=""), значение элемента управления изначально пусто и становится непустым при вводе любого символа (даже пробела).

Пример:

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

Псевдоклассные :valid и :invalid определены только в документах CSS уровня рабочего проекта, но поддержка довольно широко распространена в браузеры, за исключением IE, он шел с IE 10.

Если вы хотите сделать «пустыми» включаемые значения, состоящие только из пробелов, вы можете добавить атрибут pattern=.*\S.*.

Нет (в настоящее время) селектора CSS для прямого определения того, имеет ли элемент управления вводом непустое значение, поэтому нам нужно сделать это косвенно, как описано выше.

Как правило, селекторы CSS относятся к разметке или, в некоторых случаях, к свойствам элемента, установленным с помощью сценария (клиентский JavaScript), а не к действиям пользователя. Например, :empty соответствует элементу с пустым содержимым в разметке; все input элементы в этом смысле неизбежно пусты. Селектор [value=""] проверяет, имеет ли элемент в разметке атрибут value и пустую строку в качестве его значения. И :checked, и :indeterminate - похожие вещи. На них не влияет фактический ввод пользователя.

Вы можете использовать псевдокласс :placeholder-shown. Технически заполнитель необходим, но вместо него можно использовать пробел.

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: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:

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;}

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

а также

input[value=""]

буду работать :-)

изменить: http://jsfiddle.net/XwZR2/

Вы можете использовать трюк placeholder, как написано выше, без поля required.

Проблема с required в том, что когда вы что-то написали, а затем удалили - вход теперь всегда будет красным как часть спецификации HTML5 - тогда вам понадобится CSS, как написано выше, чтобы исправить / переопределить его.

Вы можете просто делать что-то без 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;
}

Кодовое перо: https://codepen.io/arlevi/pen/LBgXjZ

Вы можете воспользоваться заполнителем и использовать:

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

Простой css:

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

Этот код будет применять данный CSS при загрузке страницы, если ввод заполнен.

На самом деле есть способ сделать это без JavaScript.

Если вы установите для селектора <input> required значение true, вы можете проверить, есть ли в нем текст, с помощью тега CSS :valid.

Ссылки:

Документы MDN
Уловки CSS

input {
  background: red;
}

input:valid {
  background: lightgreen;
}

<input type="text" required>

Вы можете стилизовать input[type=text] по-разному в зависимости от того, есть ли на входе текст, стилизовав заполнитель. На данный момент это не официальный стандарт, но он имеет широкую поддержку браузерами, хотя и с другими префиксами:

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;
}

Пример: http://fiddlesalad.com/scss/input-placeholder-css

Использование JS и CSS: не псевдокласс

 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="" />

   

действительный селектор сделает свое дело.

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

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

Простой трюк с jQuery и CSS Вот так:

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;
    }

сделайте это в части HTML следующим образом:

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

Обязательный параметр потребует наличия текста в поле ввода, чтобы быть действительным.

Использование атрибута placeholder и псевдокласса placeholder-shown - правильный способ определить, есть ли на вводе текст.

Пример:

<input type="email" placeholder=" " required>
<label>Email</label>

input:focus ~ label,
input:not(:placeholder-shown) ~ label
{
  top : -4em
  left : -0.2em
  font-size : 0.9em
}

Да! вы можете сделать это с помощью простого базового атрибута с селектором значений.

Используйте селектор атрибутов с пустым значением и примените свойства input[value='']

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

Это невозможно с css. Чтобы реализовать это, вам нужно будет использовать JavaScript (например, $("#input").val() == "").