: नहीं (: खाली) सीएसएस चयनकर्ता काम नहीं कर रहा है?

Question 1

मैं इस विशेष सीएसएस चयनकर्ता के साथ एक समय की ऊँचाई पर चल रहा हूँ, जब मैं :not(:empty)इसे जोड़ने के लिए काम नहीं करना चाहता । यह अन्य चयनकर्ताओं के किसी भी संयोजन के साथ ठीक काम करता है:

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

अगर मैं :not(:empty)हिस्सा निकालता हूं , तो यह ठीक काम करता है। यहां तक कि अगर मैं चयनकर्ता को बदल देता हूं, input:not(:empty)तब भी उन इनपुट फ़ील्ड का चयन नहीं करेगा, जिनमें टेक्स्ट टाइप किया गया है। क्या यह टूटी हुई है या मुझे सिर्फ :emptyएक :not()चयनकर्ता के भीतर उपयोग करने की अनुमति नहीं है ?

केवल एक और चीज जो मैं सोच सकता हूं, वह यह है कि ब्राउज़र अभी भी कह रहे हैं कि तत्व खाली है क्योंकि इसके कोई बच्चे नहीं हैं, बस प्रति "मूल्य" है। करता है:empty चयनकर्ता के पास एक नियमित तत्व बनाम इनपुट तत्व के लिए अलग कार्यक्षमता नहीं है? हालांकि यह संभव नहीं लगता है क्योंकि :emptyकिसी क्षेत्र पर उपयोग करने और उसमें कुछ टाइप करने के कारण वैकल्पिक प्रभाव हट जाएगा (क्योंकि यह खाली नहीं है)।

फ़ायरफ़ॉक्स 8 और क्रोम में परीक्षण किया गया।

Question 2

शून्य तत्व होने के नाते , एक <input>तत्व को "खाली" की HTML परिभाषा द्वारा खाली माना जाता है , क्योंकि सभी शून्य तत्वों का सामग्री मॉडल हमेशा खाली होता है । इसलिए वे हमेशा :emptyछद्म श्रेणी से मेल खाएंगे , चाहे उनका मूल्य हो या न हो। यही कारण है कि उनके मूल्य को प्रारंभ टैग में एक विशेषता द्वारा दर्शाया जाता है, न कि प्रारंभ और अंत टैग के भीतर पाठ सामग्री के बजाय।

इसके अलावा, चयनकर्ता कल्पना से :

:emptyछद्म वर्ग एक तत्व सभी में कोई बच्चे हैं कि प्रतिनिधित्व करता है। दस्तावेज़ के पेड़ के संदर्भ में, केवल तत्व नोड्स और सामग्री नोड्स (जैसे डोम टेक्स्ट नोड्स, सीडीएटीए नोड्स, और इकाई संदर्भ) जिनके डेटा में गैर-शून्य लंबाई है, को शून्यता को प्रभावित करने के रूप में माना जाना चाहिए;

नतीजतन, input:not(:empty)एक उचित HTML दस्तावेज़ में कुछ भी मेल नहीं खाएगा। (यह अभी भी एक काल्पनिक एक्सएमएल दस्तावेज़ में काम करेगा जो एक <input>तत्व को परिभाषित करता है जो पाठ या बाल तत्वों को स्वीकार कर सकता है।)

मुझे नहीं लगता है कि आप <input>केवल सीएसएस (यानी जब भी कोई फ़ील्ड खाली हो, लागू हो और एक बार पाठ दर्ज न हो) का उपयोग करके गतिशील रूप से खाली फ़ील्ड शैली कर सकते हैं । आप शुरू में खाली खेतों का चयन कर सकते हैं यदि उनके पास एक खाली valueविशेषता है ( input[value=""]) या पूरी तरह से विशेषता का अभाव है ( input:not([value])), लेकिन यह इसके बारे में है।

Question 3

यह इनलाइन जावास्क्रिप्ट 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);" />

स्निपेट का विस्तार करें

Question 4

आप उपयोग करने का प्रयास कर सकते हैं: प्लेसहोल्डर-दिखाया ...

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

Question 5

.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>

स्निपेट का विस्तार करें

Question 6

आप इसे अलग तरीके से देख सकते हैं; :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 Mutation Events) का उपयोग DOM स्तर 4 में अब हटा दिया गया है, और DOM Mutation Observers द्वारा प्रतिस्थापित किया गया है।

अस्वीकरण: ध्यान दें कि inputघटनाएं वर्तमान में प्रयोगात्मक हैं , और शायद व्यापक रूप से समर्थित नहीं हैं।

Question 7

चूंकि प्लेसहोल्डर इनपुट पर गायब है, आप उपयोग कर सकते हैं:

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

Question 8

शुद्ध सीएसएस समाधान

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

Question 9

एक और शुद्ध सीएसएस समाधान

.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>

स्निपेट का विस्तार करें

Question 10

यह आधुनिक ब्राउज़रों में काम करना चाहिए:

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

यह सभी इनपुट का चयन मूल्य विशेषता के साथ करता है और फिर उनके बीच गैर रिक्त मान वाले इनपुट का चयन करता है।

Question 11

input:not([value=""])

यह काम करता है क्योंकि हम इनपुट का चयन केवल तभी करते हैं जब कोई रिक्त स्ट्रिंग नहीं होती है

Question 12

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

// or 

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