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

Есть ли способ определить, есть ли на входе текст с помощью CSS? Я пытался использовать :emptyпсевдокласс, и я пытался использовать [value=""], ни один из которых не работал. Я не могу найти единственное решение для этого.

Я полагаю, что это должно быть возможно, учитывая, что у нас есть псевдоклассы :checked, и :indeterminateоба из них похожи друг на друга.

Пожалуйста, обратите внимание: я делаю это для "Стильного" стиля , который не может использовать JavaScript.

Также обратите внимание, что 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 onkeyup="this.setAttribute('value', this.value);" />

и

input[value=""]

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

редактировать: http://jsfiddle.net/XwZR2/

В основном все ищут:

МЕНЬШЕ:

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

Вы можете использовать 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

Простой CSS:

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

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

Вы можете стилизовать по- 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:not(:placeholder-shown) {
  border: 1px solid red;
}

Допустимый селектор будет делать трюк.

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

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

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

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

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

Это невозможно с помощью CSS. Для реализации этого вам придется использовать JavaScript (например $("#input").val() == "").