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


187

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

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

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

Также обратите внимание, что Stylish используется на стороне клиента на страницах, которые пользователь не контролирует.


Я не уверен, как это сделать с помощью CSS (который не обновляется на лету, во всяком случае). Это легко с JavaScript, хотя.
ralph.m

Я не думаю, что могу использовать JavaScript. Я работаю над "стильным" стилем. Уверен, это должно быть сделано полностью с помощью CSS. Если он не будет обновляться, когда пользователь вводит текст, я думаю, это пустая трата времени. Не думал об этом. Хм. По крайней мере, это не критично для стиля, это просто изящество, которое я надеялся добавить.
JacobTheDev

Ответы:


66

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

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

Я посмотрю на эту пользовательскую вещь. Спасибо.
JacobTheDev

@MartinGottweis, не в случае ОП это не так. Это [стильный] вопрос.
Брок Адамс

1
@BrockAdams, op говорит, что не может использовать javascript, поэтому вариант: valid - это путь. Я что-то упускаю?
Мартин Готвейс,

1
@MartinGottweis, :validопция требует переписать страницу - это то, чего ОП не может сделать со Стилом, и что ни один из других ответов вообще не отображается в контексте просмотра. Пользователь не имеет контроля над страницей, которую он посещает.
Брок Адамс

265

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


7
Это отличное решение, если и только если требуется каждый ввод - если нет, вы сталкиваетесь с ситуацией, когда у вас есть пустое, но действительное поле ввода, на которое не влияет недопустимый стиль . JS, вероятно, победитель этого решения
AdamSchuld

7
это грязно, но чудесно умно. Не решение вопроса, но оно определенно помогло мне
января

1
Грязное решение. Обратите внимание, что это может вызвать проблемы с автозаполнением в Chrome, если вы попытаетесь добавить логику отображения метки на основе этого ИЛИ, если ввод фактически не требуется, и форма имеет проверку на основе этого
Artjom Kurapov

1
Семантически это неправильно. Как упоминалось в предыдущих комментариях, некоторые входные данные могут быть необязательными, а requiredатрибут может препятствовать отправке формы.
Женминг

1
Добавлен novalidateатрибут для <form>элемента, чтобы не беспокоиться о красном отображении, когда поле пусто после заполнения один раз:<form ... novalidate> <input ... required /> </form>
Alcalyn

228

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


10
К сожалению, это не поддерживается ни IE, ни Firefox. Источник: caniuse.com/#feat=css-placeholder-shown
Шон Доусон

2
Потрясающий ответ. Поддержка браузера - отстой, но если полифилл выходит, :placeholder-shownто это должно стать принятым ответом. requiredМетод не принимает во внимание случаев бахромы. Следует отметить, что вы можете передать пробел заполнителю, и этот метод все еще будет работать. Престижность.
Corysimmons

5
Другим недостатком этого является то, что вам, кажется, нужно иметь заполнитель. Другими словами, input:not(:placeholder-shown)всегда будет совпадать, <input/>даже если нет значения.
Redbmk

5
Для меня это работает в Chrome, Firefox и Safari. Не в IE11.
J0ANMM

1
@redbmk, как уже упоминалось corysimmons, следует отметить, что вы можете передать пробел в качестве заполнителя, и этот метод все равно будет работать.
Наим Баги

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

и

input[value=""]

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

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


24
Это CSS? Похоже, HTML и Javascript (но я могу ошибаться).
1914 года

Брук Адамс написал: [value = ""] работает; но только для исходного состояния. Это связано с тем, что атрибут значения узла (который видит CSS) не совпадает со свойством значения узла (изменяется пользователем или JavaScript DOM и передается в виде данных формы). -> Волшебство заключается в обновлении атрибута значения при изменениях: jsfiddle.net/XwZR2
Том Д.

2
@ JanosWeisz нет, не будет. Этот обработчик будет установлен до того, как скрипт сможет манипулировать этим элементом, и он может работать вместе с обработчиком, добавленным с помощью addEventListener.
Dinoboff

1
Очевидно, onkeyup заботится только о вводе с клавиатуры. Не забывайте, однако, что вы можете вставить текст в поле ввода с помощью мыши. Попробуйте: скопируйте текст в буфер обмена, затем щелкните правой кнопкой мыши на входе и нажмите Вставить. Смотреть CSS не работает. То же самое с перетаскиванием текста в поле ввода с помощью мыши.
белуга

4
input[value]:not([value=""])- лучше. Спасибо всем. codepen.io/iegik/pen/ObZpqo
iegik

30

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

МЕНЬШЕ:

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

1
Вы явно только что дали использовать рабочее решение, и у вас есть 0 голосов WaT?
ProNOOB

5
Потрясающий ответ. Тем не менее, псевдокласс: показанный местозаполнителем не работает в IE или Edge, так что это не полное решение. Хотя это чертовски близко, и это заставляет меня хотеть убить Эджа за то, что он не поддержал его. То есть я мог принять, но Эдж? Давай, Microsoft!
Аарон Мартин-Колби

2
Это не просто решение CSS, если вам нужно добавить «требуемый» в ваш HTML
user1566694

Спасибо, добрый сэр, я искренне надеюсь, что это станет выше, так как, по моему мнению, это то, чего действительно хочет большинство людей.
sivi911

20

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


1
Этот подход идеально подходил для моего случая использования. В любом случае у меня были поисковые фильтры с заполнителями, и я хотел, чтобы при вводе значения граница поля ввода была подсвечена.
Стивен Таттлби

9

Простой CSS:

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

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


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

Проблема загрузки страницы должна быть явно отмечена для этого ответа.
Брайс Снайдер

6

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


К вашему сведению, это надежно форматирует заполнитель, но только сам заполнитель. Это дает вам иллюзию изменения цвета текста, но это уже так, просто с серым и черным по умолчанию.
Джон Вайс

Весь CSS - дешевая иллюзия, вы меняете только внешний вид, не влияя на реальный контент :-)
vbraun

Это именно то, что мне было нужно. Я потребовал ввода, чтобы изменить стили, если в нем был текст, так как дизайн для заполнителя отличается от стиля ввода. Отлично!
Кристофер Маршалл

Это работает для фона, но не границы. Я не слишком глубоко копался в попытке изменить границу.
Маджиннаибу

5

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

   


4

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

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


1

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

1

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

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

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


Это не помогает определить, есть ли на входе текст с помощью CSS, что и было вопросом.
Юкка К. Корпела

Извините, это действительно помогает ... Это позволяет использовать псевдоклассы, как объяснено в моем ответе.
Юкка К. Корпела

1
Это стильный вопрос - это означает, что ОП не может контролировать или изменять целевую страницу. Он видит только страницу на стороне клиента.
Брок Адамс

3
Это было очень полезно, вот пример того, о чем говорит Xedret
tolmark

****** <вход требуется> && вход: действителен {...} ******
FremyCompany

0

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

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

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

-6

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


2
Я знаю, как это сделать, мне нужно сделать это с помощью CSS. Пожалуйста, прочитайте комментарии к оригинальному сообщению. Я строю "стильный" стиль, который не может использовать JavaScript, насколько мне известно.
JacobTheDev
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.