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

Ответ 1

Стильный не может этого сделать, потому что 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";
}

Ответ 2

Возможно, с обычными оговорками 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 - подобные вещи. Фактический пользовательский вход не влияет.

Ответ 3

Вы можете использовать псевдокласс :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=" " />

Ответ 4

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

и

input[value=""]

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

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

Ответ 5

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

LESS:

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

Ответ 6

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

Ответ 7

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

Ответ 8

Простой CSS:

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

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

Ответ 9

Использование 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="" />

   

Ответ 10

допустимый селектор выполнит трюк.

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

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

Ответ 11

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

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

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

Ответ 12

Простой трюк с 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;
    }

Ответ 13

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

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

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

Ответ 14

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