Есть ли способ определить, есть ли на входе текст с помощью CSS? Я пытался использовать :empty
псевдокласс, и я пытался использовать [value=""]
, ни один из которых не работал. Я не могу найти единственное решение для этого.
Я полагаю, что это должно быть возможно, учитывая, что у нас есть псевдоклассы :checked
, и :indeterminate
оба из них похожи друг на друга.
Пожалуйста, обратите внимание: я делаю это для "Стильного" стиля , который не может использовать JavaScript.
Также обратите внимание, что Stylish используется на стороне клиента на страницах, которые пользователь не контролирует.
Ответы:
Стильный не может этого сделать, потому что CSS не может этого сделать. У CSS нет (псевдо) селекторов для
<input>
значений. Видеть::empty
Селектор относится только к дочерним узлам, а не входных значений.[value=""]
делает работу; но только для исходного состояния. Это связано с тем, чтоvalue
атрибут узла (который видит CSS) не совпадает соvalue
свойством узла (изменяется пользователем или JavaScript DOM и передается в виде данных формы).Если вы не заботитесь только о начальном состоянии, вы должны использовать скрипт пользователя или скрипт Greasemonkey. К счастью, это не сложно. Следующий скрипт будет работать в Chrome или Firefox с установленными Greasemonkey или Scriptish или в любом браузере, который поддерживает скрипты пользователей (т.е. большинство браузеров, кроме IE).
Посмотрите демонстрацию ограничений CSS плюс решение javascript на этой странице jsBin .
источник
:valid
опция требует переписать страницу - это то, чего ОП не может сделать со Стилом, и что ни один из других ответов вообще не отображается в контексте просмотра. Пользователь не имеет контроля над страницей, которую он посещает.Это возможно, с обычными предостережениями CSS и, если HTML-код может быть изменен. Если вы добавите
required
атрибут к элементу, то элемент будет совпадать:invalid
или в:valid
зависимости от того, является ли значение элемента управления пустым или нет. Если элемент не имеетvalue
атрибута (или имеетvalue=""
), значение элемента управления изначально пусто и становится непустым, когда вводится какой-либо символ (даже пробел).Пример:
Псевдоклассифицируются
:valid
и:invalid
определяются только в CSS-документах уровня рабочего проекта, но поддержка довольно широко распространена в браузерах, за исключением того, что в IE она шла с IE 10.Если вы хотите сделать «пустыми» включаемые значения, состоящие только из пробелов, вы можете добавить атрибут
pattern=.*\S.*
.В настоящее время нет CSS-селектора для непосредственного определения, имеет ли элемент управления вводом непустое значение, поэтому нам нужно сделать это косвенно, как описано выше.
Как правило, CSS-селекторы ссылаются на разметку или, в некоторых случаях, на свойства элемента, заданные с помощью сценариев (клиентский JavaScript), а не на действия пользователя. Например,
:empty
сопоставляет элемент с пустым содержимым в разметке;input
в этом смысле все элементы неизбежно пусты. Селектор[value=""]
проверяет, имеет ли элементvalue
разметку и имеет ли пустую строку в качестве значения. И так:checked
и:indeterminate
есть схожие вещи. На них не влияет фактический пользовательский ввод.источник
required
атрибут может препятствовать отправке формы.novalidate
атрибут для<form>
элемента, чтобы не беспокоиться о красном отображении, когда поле пусто после заполнения один раз:<form ... novalidate> <input ... required /> </form>
Вы можете использовать
:placeholder-shown
псевдо-класс. Технически требуется заполнитель, но вместо этого вы можете использовать пробел.источник
:placeholder-shown
то это должно стать принятым ответом.required
Метод не принимает во внимание случаев бахромы. Следует отметить, что вы можете передать пробел заполнителю, и этот метод все еще будет работать. Престижность.input:not(:placeholder-shown)
всегда будет совпадать,<input/>
даже если нет значения.и
буду работать :-)
редактировать: http://jsfiddle.net/XwZR2/
источник
input[value]:not([value=""])
- лучше. Спасибо всем. codepen.io/iegik/pen/ObZpqoВ основном все ищут:
МЕНЬШЕ:
Чистый CSS:
источник
Вы можете использовать
placeholder
трюк, как написано выше, безrequired
поля.Проблема в
required
том, что когда вы что-то написали, а затем удалили - входные данные теперь всегда будут красными как часть спецификации HTML5 - тогда вам потребуется CSS, как написано выше, чтобы исправить / переопределить это.Вы можете просто сделать вещь без
required
CSS
Код ручка: https://codepen.io/arlevi/pen/LBgXjZ
источник
Простой CSS:
Этот код будет применять данный CSS при загрузке страницы, если ввод заполнен.
источник
Вы можете стилизовать по-
input[type=text]
разному в зависимости от того, содержит ли текст ввод, используя стиль заполнителя. На данный момент это не официальный стандарт, но имеет широкую поддержку браузера, хотя и с разными префиксами:Пример: http://fiddlesalad.com/scss/input-placeholder-css
источник
Использование JS и CSS: не псевдокласс
источник
Вы можете воспользоваться заполнителем и использовать:
источник
Допустимый селектор будет делать трюк.
источник
Простой трюк с jQuery и CSS
JQuery:
CSS:
источник
сделайте это на HTML-части следующим образом:
Обязательный параметр потребует, чтобы он имел текст в поле ввода, чтобы быть действительным.
источник
Да! Вы можете сделать это с помощью простого базового атрибута с помощью селектора значений.
источник
Это невозможно с помощью CSS. Для реализации этого вам придется использовать JavaScript (например
$("#input").val() == ""
).источник