: not (: empty) ตัวเลือก CSS ไม่ทำงาน?

ฉันมีเวลาพอสมควรกับตัวเลือก CSS นี้ซึ่งไม่ต้องการทำงานเมื่อฉันเพิ่ม:not(:empty)เข้าไป ดูเหมือนว่าจะทำงานได้ดีกับการรวมกันของตัวเลือกอื่น ๆ :

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

ถ้าฉันถอดชิ้น:not(:empty)ส่วนออกมันก็ใช้ได้ดี แม้ว่าฉันจะเปลี่ยนตัวเลือกinput:not(:empty)แต่ก็ยังไม่ได้เลือกช่องป้อนข้อมูลที่มีการพิมพ์ข้อความลงไป สิ่งนี้เสียหรือฉันไม่ได้รับอนุญาตให้ใช้:emptyภายใน:not()ตัวเลือก?

สิ่งเดียวที่ฉันคิดได้คือเบราว์เซอร์ยังคงบอกว่าองค์ประกอบนั้นว่างเปล่าเพราะไม่มีลูกเพียงแค่ "ค่า" ต่อการพูด ที่ไม่:emptyเลือกไม่ได้มีการทำงานที่แยกต่างหากสำหรับองค์ประกอบเข้ากับองค์ประกอบปกติ? สิ่งนี้ดูไม่น่าจะเป็นไปได้เพราะการใช้งาน:emptyบนฟิลด์และการพิมพ์บางสิ่งลงไปจะทำให้เอฟเฟกต์ทางเลือกหายไป (เนื่องจากไม่ว่างเปล่าอีกต่อไป)

ทดสอบใน Firefox 8 และ Chrome

เป็นองค์ประกอบที่เป็นโมฆะเป็น<input>องค์ประกอบที่ถือว่าเป็นที่ว่างเปล่าโดยนิยาม HTML ของ "ว่าง" ตั้งแต่รุ่นเนื้อหาขององค์ประกอบที่เป็นโมฆะทั้งหมดอยู่เสมอว่างเปล่า ดังนั้นพวกเขาจะจับคู่:emptyคลาสหลอกเสมอไม่ว่าจะมีค่าหรือไม่ก็ตาม นี่คือสาเหตุที่ค่าของมันแสดงโดยแอตทริบิวต์ในแท็กเริ่มต้นแทนที่จะเป็นเนื้อหาข้อความภายในแท็กเริ่มต้นและแท็กสิ้นสุด

นอกจากนี้จากข้อมูลจำเพาะของ Selectors :

:emptyหลอกชั้นแสดงให้เห็นถึงองค์ประกอบที่ไม่มีเด็กที่มีทั้งหมด ในแง่ของโครงสร้างเอกสารโหนดองค์ประกอบและโหนดเนื้อหา (เช่นโหนดข้อความ DOM โหนด CDATA และการอ้างอิงเอนทิตี) ซึ่งข้อมูลมีความยาวไม่เป็นศูนย์จะต้องถือว่ามีผลต่อความว่างเปล่า

ดังนั้นinput:not(:empty)จะไม่จับคู่สิ่งใดในเอกสาร HTML ที่เหมาะสม (ยังคงใช้งานได้ในเอกสาร XML สมมุติฐานที่กำหนด<input>องค์ประกอบที่สามารถรับข้อความหรือองค์ประกอบย่อยได้)

ฉันไม่คิดว่าคุณสามารถจัดรูปแบบช่องว่าง<input>แบบไดนามิกโดยใช้ CSS เพียงอย่างเดียว (เช่นกฎที่ใช้เมื่อใดก็ตามที่ฟิลด์ว่างเปล่าและจะไม่ป้อนข้อความเมื่อใดก็ตาม) คุณสามารถเลือกช่องว่างในตอนแรกได้หากมีvalueแอตทริบิวต์ว่าง( input[value=""]) หรือไม่มีแอตทริบิวต์ทั้งหมด ( input:not([value])) แต่ก็เกี่ยวกับเรื่องนี้

เป็นไปได้ด้วยจาวาสคริปต์แบบอินไลน์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" 
  onchange="this.setAttribute('value', this.value);" />

คุณสามารถลองใช้: ตัวยึดตำแหน่งที่แสดง ...

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

คุณอาจเข้าใกล้สิ่งนี้แตกต่างกัน ละเว้นการใช้: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>

ที่เกี่ยวข้อง

• โพสต์อื่นเกี่ยวกับเหตุการณ์การกลายพันธุ์ของ DOM ซึ่งแนะนำให้ใช้inputเหตุการณ์ ( เหตุการณ์การกลายพันธุ์ของ DOM เลิกใช้แล้วใน DOM ระดับ 4 และถูกแทนที่ด้วย DOM Mutation Observers)

ข้อจำกัดความรับผิดชอบ:โปรดทราบว่าinputกิจกรรมอยู่ระหว่างการทดลองและอาจไม่ได้รับการสนับสนุนอย่างกว้างขวาง

เนื่องจากตัวยึดตำแหน่งหายไปเมื่อป้อนข้อมูลคุณสามารถใช้:

input:placeholder-shown{
    //rules for not empty input
}

โซลูชัน 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;
}

อีกหนึ่งโซลูชัน CSS ที่แท้จริง

.form{
  position:relative;
  display:inline-block;
}
.form input{
  margin-top:10px;
}
.form label{
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    transition:all 1s ease;
}
input:not(:placeholder-shown) + label{
    top:-10px;
    opacity:1;
}

<div class="form">
    <input type="text" id="inputFName" placeholder="Firstname">
    <label class="label" for="inputFName">Firstname</label>
</div>
<div class="form">
    <input type="text" id="inputLName" placeholder="Lastname">
    <label class="label" for="inputLName">Lastname</label>
</div>

สิ่งนี้ควรใช้ได้กับเบราว์เซอร์สมัยใหม่:

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

เลือกอินพุตทั้งหมดที่มีแอตทริบิวต์ค่าจากนั้นเลือกอินพุตที่ไม่มีค่าว่างในหมู่พวกเขา

input:not([value=""])

สิ่งนี้ได้ผลเนื่องจากเรากำลังเลือกอินพุตเฉพาะเมื่อไม่มีสตริงว่าง

input:not(:invalid){
 border: 1px red solid;
}

// or 

input:not(:focus):not(:invalid){
 border: 1px red solid;
}