CSSを使用して空の入力ボックスを照合する

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

input[value=""]

唯一のフィールドである場合は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へのクレジット）

最近のブラウザーでは: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/

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

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

フィールドの値を更新しても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">

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

で動作します：

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

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

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

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

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="john_doe@example.com" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

参考までに、JSFiddleはこちら：http ://jsfiddle.net/0sf6m46j/

$('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; }

これは私のために働きました：

HTMLの場合、required属性をinput要素に追加します

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

CSSの場合、:invalidセレクターを使用して空の入力をターゲットにします

input.my-input-element:invalid {

}

ノート：

• 約requiredからw3Schools.com：「存在する場合、それは入力フィールドがフォームを送信する前に記入しなければならないことを指定します。」

この質問は少し前に尋ねられた可能性がありますが、クライアント側のフォーム検証を探すためにこのトピックに最近着手し、:placeholder-shown サポートが改善されるにつれて、次のことが他の人に役立つと思いました。

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

ここにCodePenの宣伝と説明があります：https ://codepen.io/johanmouchet/pen/PKNxKQ

IEまたはChromium Edgeより前のバージョンがサポートされていないことに満足している場合（これをプログレッシブ拡張に使用している場合は問題ない可能性があります）、:placeholder-shownBerendが言ったように使用できます。ChromeとSafariの場合、スペースは機能しますが、これを機能させるには実際には空でないプレースホルダーが必要です。

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

label.floating-label {
  display: block;
  position: relative;
  height: 2.2em;
  margin-bottom: 1em;
}

label.floating-label input {
  font-size: 1em;
  height: 2.2em;
  padding-top: 0.7em;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label.floating-label input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

label.floating-label input+span {
  position: absolute;
  top: 0em;
  left: 0;
  display: block;
  width: 100%;
  font-size: 0.66em;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}

label.floating-label input:placeholder-shown {
  padding-top: 0;
  font-size: 1em;
}

label.floating-label input:placeholder-shown+span {
  top: 0.3em;
  font-size: 1em;
}

<fieldset>
  <legend>
    Floating labels example (no-JS)
  </legend>
  <label class="floating-label">
    <input type="text" placeholder=" ">
    <span>Username</span>
  </label>
  <label class="floating-label">
    <input type="Password" placeholder=" ">
    <span>Password</span>
  </label>
</fieldset>
<p>
  Inspired by Bootstrap's <a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/">floating labels</a>.
</p>

入力にクラス名を追加し、それにCSSルールを適用することは私にとってはうまくいきました：

<input type="text" name="product" class="product" />

<style>
input[value=""].product {
    display: none;
}
</style>

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

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

更新

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;
    }
}

これは非常に古いスレッドであることに気づきましたが、それ以来状況が少し変わっており、問題を解決するために必要なものの正しい組み合わせを見つけるのに役立ちました。だから私は自分がしたことを共有したいと思いました。

問題は、オプションの入力が満たされた場合に、それが満たされた場合に必要だったのと同じcssを適用するように求めていたことです。cssは、満たされていない場合にもオプションの入力にcssを適用する疑似クラス：validを使用しました。

これは私がそれを修正した方法です。

HTML

<input type="text" required="required">
<input type="text" placeholder="">

CSS

input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}