Визначте, чи вхід містить текст у ньому за допомогою CSS - на сторінці, яку я відвідую, і не контролюю?

Чи є спосіб виявити, чи вхід містить текст у ньому за допомогою CSS? Я намагався використовувати :emptyпсевдоклас, і я намагався використовувати [value=""], жоден з яких не працював. Я не можу знайти єдиного рішення для цього.

Я думаю, що це повинно бути можливим, враховуючи, що у нас є псевдокласи :checked, і :indeterminateобидва вони подібні.

Зверніть увагу: я роблю це для стильного стилю , який не може використовувати JavaScript.

Також зауважте, що стильний використовується на стороні клієнта на сторінках, які користувач не контролює.

Стильний не може цього зробити, оскільки 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 type="text" class="myText" required="required" />

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

Ви можете скористатись заповнювачем та використовувати:

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

Простий трюк з 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() == "").