CSSを使用して入力にテキストが含まれているかどうかを検出します—私がアクセスしているページで、制御していないのですか？

CSSを介して入力にテキストがあるかどうかを検出する方法はありますか？私は:empty疑似クラスを使用しようとしましたが[value=""]、どちらも機能しませんでした。これに対する単一の解決策を見つけることができないようです。

私は、我々が擬似クラスを持って考えると、これが可能でなければならない想像し:checked、そして:indeterminate種類同じようなことをしているどちらも、。

注：これは、 JavaScriptを利用できない「スタイリッシュ」スタイルのために行っています。

また、Stylishは、クライアント側で、ユーザーが制御しないページで使用されることに注意してください。

CSSがこれを実行できないため、Stylishはこれを実行できません。 CSSには<input>値の（疑似）セレクターがありません。見る：

• W3Cセレクター仕様
• Mozilla / Firefoxがサポートするセレクター
• クロスブラウザ、CSS3サポート表

:emptyセレクタは、唯一の子ノードではなく、入力値を指します。
[value=""] 動作します。ただし、初期状態のみ。これは、ノードのvalue 属性（CSSが認識する）がノードのvalue プロパティと同じではないためです（ユーザーまたはDOM JavaScriptによって変更され、フォームデータとして送信されます）。

初期状態のみを気にしない限り、ユーザースクリプトまたはGreasemonkeyスクリプトを使用する必要があります。 幸い、これは難しくありません。次のスクリプトはChrome、GreasemonkeyまたはScriptishがインストールされたFirefox、またはユーザースクリプトをサポートするすべてのブラウザー（IEを除くほとんどのブラウザー）で動作します。

このjsBinページで、CSSの制限のデモとJavaScriptソリューションのデモをご覧ください。

// ==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() == ""。