web-dev-qa-db-ja.com

CSSを使用して空の入力ボックスを一致させる

空の入力ボックスにスタイルを適用するにはどうすればよいですか？ユーザーが入力フィールドに何かを入力すると、スタイルは適用されなくなります。これはCSSで可能ですか？私はこれを試しました：

input[value=""]
cssinputcss-selectors
119
Sjoerd

フィールドがrequiredのみの場合、input:validを使用できます

#foo-thing:valid + .msg { visibility: visible!important; }      
 <input type="text" id="foo-thing" required="required">
 <span class="msg" style="visibility: hidden;">Yay not empty</span>

jsFiddleでのライブ を参照してください

または#foo-thing:invalidを使用して否定します（@SamGoodyのクレジット）

144
lukmdo

最新のブラウザでは、:placeholder-shownを使用して空の入力をターゲットにできます（::placeholderと混同しないでください）。

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

詳細情報とブラウザのサポート： https://css-tricks.com/almanac/selectors/p/placeholder-shown/

120
Berend

CSSにはこれを行うセレクターはありません。属性セレクターは、計算値ではなく属性値と一致します。

JavaScriptを使用する必要があります。

43
Quentin

フィールドの値を更新してもDOMの値属性は更新されないため、実際には空でなくても、セレクターは常にフィールドに一致します。

代わりに invalid擬似クラス を使用して、次のように目的を達成します。

input:required {
  border: 1px solid green;
}
input:required:invalid {
  border: 1px solid red;
}
<input required type="text" value="">

<input required type="text" value="Value">
17
Shaggy

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

で動作します：

<input type="text" />
<input type="text" value="" />

ただし、誰かがタイピングを開始してもスタイルは変わりません（そのためにはJSが必要です）。

15
Draco Ater

レガシーブラウザをサポートする必要がない場合は、required、valid、およびinvalidの組み合わせを使用できます。

これを使用することの良い点は、validおよびinvalid疑似要素が入力フィールドの型属性で適切に機能することです。例えば：

input:invalid, textarea:invalid { 
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

input:valid, textarea:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
<input type="email" name="email" placeholder="[email protected]" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

参考のため、JSFiddleはこちら： http://jsfiddle.net/0sf6m46j/

10
My Stack Overfloweth
$('input#edit-keys-1').blur(function(){
    tmpval = $(this).val();
    if(tmpval == '') {
        $(this).addClass('empty');
        $(this).removeClass('not-empty');
    } else {
        $(this).addClass('not-empty');
        $(this).removeClass('empty');
    }
});

jQueryで。クラスを追加し、CSSでスタイルを設定しました。

.empty { background:none; }
5
Israel Morales

これは私のために働いた：

html：-入力要素に必要な属性を追加します

<input class="my-input-element" type="text" placeholder="" required />

css：-：invalidセレクターを使用

input.my-input-element:invalid {

}

注：

  • 入力要素の値は必要ありません。
  • w3Schools.com からの必須について、「存在する場合、フォームを送信する前に入力フィールドに入力する必要があることを指定します。」
3
Ariella

この質問は少し前に尋ねられたかもしれませんが、クライアントサイドのフォーム検証を探してこのトピックに最近着き、:placeholder-shownsupport が良くなっているので、私は次のように考えました他の人を助けるかもしれません。

Berend このCSS4擬似クラスを使用するというアイデアを使用して、ユーザーが入力を完了した後にのみトリガーされるフォーム検証を作成できました。

CodePenの詳細と説明は次のとおりです。 https://codepen.io/johanmouchet/pen/PKNxKQ

2
Johan M.

空の入力ボックスを取得するための明確な属性がある答えに疑問があります。このコードを見てください

/*empty input*/
input:empty{
    border-color: red;
}
/*input with value*/
input:not(:empty){
    border-color: black;
}

UPDATE

input, select, textarea {
    border-color: @green;
    &:empty {
        border-color: @red;
    }
}

さらに検証の見栄えが良い

 input, select, textarea {
    &[aria-invalid="true"] {
        border-color: amber !important;
    }

    &[aria-invalid="false"], &.valid {
        border-color: green !important;
    }
}
0
Nasser Hadjloo