web-dev-qa-db-ja.com

：not（：empty）CSSセレクターが機能していませんか？

この特定のCSSセレクターには、:not(:empty)を追加するときに動作しないようにしたいと思います。他のセレクターの任意の組み合わせでうまく動作するようです：

input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none }

:not(:empty)部分を削除すると、うまく機能します。セレクターをinput:not(:empty)に変更しても、テキストが入力された入力フィールドは選択されません。これは壊れていますか、または:not()セレクター内で:emptyを使用することは許可されていませんか？

私が考えることができる他の唯一のことは、ブラウザにはまだ要素が空であると言っているということです。 :emptyセレクターには、入力要素と通常の要素の個別の機能はありませんか？ただし、フィールドで:emptyを使用してそこに何かを入力すると、代替の効果がなくなります（空ではなくなったため）。

Firefox 8およびChromeでテスト済み。

htmlcsscss3css-selectors
85
animuson

void要素 であるため、<input>要素は empty と見なされます。これは、すべてのvoid要素のコンテンツモデル常に空です。そのため、値があるかどうかに関係なく、:empty疑似クラスと常に一致します。これが、開始タグと終了タグ内のテキストコンテンツではなく、開始タグの属性によって値が表される理由でもあります。

また、 セレクター仕様 から：

:empty擬似クラスは、子をまったく持たない要素を表します。ドキュメントツリーに関しては、データの長さがゼロ以外の要素ノードとコンテンツノード（DOMテキストノード、CDATAノード、エンティティ参照など）のみが空に影響していると見なす必要があります。

そのため、input:not(:empty)は、適切なHTMLドキュメントの何にも一致しません。 （テキストまたは子要素を受け入れることができる<input>要素を定義する架空のXMLドキュメントでも機能します。）

CSSだけを使用して空の<input>フィールドを動的にスタイル設定できるとは思わない（つまり、フィールドが空の場合は常に適用され、テキストが入力されない場合のルール）。空のvalue属性がある場合（input[value=""]）または属性がまったくない場合（input:not([value])）、initially emptyフィールドを選択できますが、それで十分です。

138
BoltClock

インラインjavascript onkeyup="this.setAttribute('value', this.value);"＆input:not([value=""]):not(:focus):invalidで可能です

デモ： http://jsfiddle.net/mhsyfvv9/

input:not([value=""]):not(:focus):invalid{
  background-color: tomato;
}
<input 
  type="email" 
  value="" 
  placeholder="valid mail" 
  onkeyup="this.setAttribute('value', this.value);" />
38
Mo.

あなたは：placeholder-shownを使用して試すことができます...

input {
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 5px;
  border: 2px solid lightblue;
  outline: 0;
  font-weight:bold;
  transition: border-color 200ms;
  font-family: sans-serif;
}

.validation {
  opacity: 0;
  font-size: 12px;
  font-family: sans-serif;
  color: crimson;
  transition: opacity;
}

input:required:valid {
  border-color: forestgreen;
}

input:required:invalid:not(:placeholder-shown) {
  border-color: crimson;
}

input:required:invalid:not(:placeholder-shown) + .validation {
  opacity: 1;
}

  
<input type="email" placeholder="e-mail" required>
<div class="validation">Not valid</span>

素晴らしいサポートはありません... caniuse

28
Gijs Erenstein
.floating-label-input {
  position: relative;
  height:60px;
}
.floating-label-input input {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent;
  border: 0 none;
  outline: none;
  vertical-align: middle;
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
}
.floating-label-input label {
  position: absolute;
  top: calc(50% - 5px);
  font-size: 22px;
  left: 0;
  color: #000;
  transition: all 0.3s;
}
.floating-label-input input:focus ~ label, .floating-label-input input:focus ~ label, .floating-label-input input:valid ~ label {
  top: 0;
  font-size: 15px;
  color: #33bb55;
}
.floating-label-input .line {
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: 0;
  background: #000;
  left: 0;
}
.floating-label-input .line:after {
  content: "";
  display: block;
  width: 0;
  background: #33bb55;
  height: 1px;
  transition: all 0.5s;
}
.floating-label-input input:focus ~ .line:after, .floating-label-input input:focus ~ .line:after, .floating-label-input input:valid ~ .line:after {
  width: 100%;
}
<div class="floating-label-input">
      <input type="text" id="id" required/>
      <label for="id" >User ID</label>
      <span class="line"></span>
</div>
7
Amit

これに異なるアプローチをすることができます。 :empty擬似クラスの使用を省略し、inputイベントを利用して<input>フィールドの重要な値を検出し、それに応じてスタイルを設定します。

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  input.addEventListener('input', function() {
    var bg = this.value ? 'green' : 'red';
    this.style.backgroundColor = bg;
  });
}
body {
  padding: 40px;
}
#inputList li {
  list-style-type: none;
  padding-bottom: 1.5em;
}
#inputList li input,
#inputList li label {
  float: left;
  width: 10em;
}
#inputList li input {
  color: white;
  background-color: red;
}
#inputList li label {
  text-align: right;
  padding-right: 1em;
}
<ul id="inputList">
  <li>
    <label for="username">Enter User Name:</label>
    <input type="text" id="username" />
  </li>
  <li>
    <label for="password">Enter Password:</label>
    <input type="password" id="password" />
  </li>
</ul>

関連する

免責事項：inputイベント 現在実験中 であり、おそらくそれほど広くはないサポートされています。

7
Eliran Malka

純粋なCSSソリューション

input::-webkit-input-placeholder {
    opacity: 1;
    -webkit-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* Chrome <=56, Safari < 10 */
input:-moz-placeholder {
    opacity: 1;
    -moz-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* FF 4-18 */
input::-moz-placeholder {
    opacity: 1;
    -moz-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* FF 19-51 */
input:-ms-input-placeholder {
    opacity: 1;
    -ms-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* IE 10+ */
input::placeholder {
    opacity: 1;
    transition: opacity 0s;
    text-align: right;
}
/* Modern Browsers */

*:focus::-webkit-input-placeholder {
   opacity: 0;
   text-align: left;
}
/* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder {
    opacity: 0;
    text-align: left;
}
/* FF 4-18 */
*:focus::-moz-placeholder {
    opacity: 0;
    text-align: left;
}
/* FF 19-50 */
*:focus:-ms-input-placeholder {
    opacity: 0;
    text-align: left;
}
/* IE 10+ */
*:focus::placeholder {
    opacity: 0;
    text-align: left;
}
/* Modern Browsers */

input:focus {
    text-align: left;
}
1
star