web-dev-qa-db-ja.com

CSSを使用して入力にテキストが含まれているかどうかを検出します - 訪問しているページでは制御できませんか。

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

私たちは:checkedと:indeterminateのための疑似クラスを持っていることを考えれば、これは可能でなければならないと思います。

注意してください：私はこれを "スタイリッシュな"スタイルのためにやっています、JavaScriptを利用することはできません。

また、ユーザーが制御できないページでは、スタイリッシュがクライアント側で使用されます。

cssinputis-emptystylish
143
JacobTheDev

CSSができないのでスタイリッシュはできません。 CSSには<input>の値に対する（疑似）セレクタはありません。参照：

:emptyセレクターは子ノードのみを参照し、入力値は参照しません。
[value=""]は動作します。ただし、初期状態のみです。これは、（CSSが認識する）ノードのvalue属性が、ノードの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";
}
55
Brock Adams

通常の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 はWorking DraftレベルのCSS文書でのみ定義されていますが、IEではIE 10。

「空」にスペースのみで構成される値を含めたい場合は、属性pattern=.*\S.*を追加できます。

入力コントロールに空でない値があるかどうかを直接検出するためのCSSセレクターは（現在）ありません。そのため、上記のように間接的に行う必要があります。

一般に、CSSセレクターは、ユーザーアクションではなく、マークアップ、または場合によってはスクリプトで設定された要素プロパティ（クライアント側のJavaScript）を参照します。たとえば、:emptyは、マークアップ内の空のコンテンツを持つ要素と一致します。この意味で、すべてのinput要素は避けられないほど空です。セレクタ[value=""]は、要素がマークアップにvalue属性を持ち、値として空の文字列を持つかどうかをテストします。そして:checkedと:indeterminateは似たようなものです。実際のユーザー入力による影響は受けません。

216
Jukka K. Korpela

: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=" " />
159
ngryman
<input onkeyup="this.setAttribute('value', this.value);" />

そして

input[value=""]

働くでしょう ：-）

編集： http://jsfiddle.net/XwZR2/

25
Tom D.

基本的にみんなが探しているのは、

もっと少なく：

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;}
22
Fábio ZC

シンプルなCSS：

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

このコードは、入力がいっぱいになった場合に、指定されたCSSを適用します。

6
Breno Teixeira

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

6
Ricky Levi

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="" />
6
Pavlo Kozachuk

入力にテキストが含まれているかどうかに応じて、プレースホルダをスタイルすることで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

6
vbraun

有効なセレクタ がうまくいくでしょう。

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

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

はい！あなたは値セレクターを持つ単純な基本的な属性でそれをすることができます。

空白の値を持つ属性セレクタを使用してプロパティを適用するinput[value='']

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

このようにHTML部分でそれをします：

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

Requiredパラメータは、有効にするために入力フィールドにテキストを含めることを要求します。

1
Xedret

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
Bren1818