CSS का उपयोग करके एक खाली इनपुट बॉक्स से मिलान करना

Question

मैं एक खाली इनपुट बॉक्स में शैली कैसे लागू करूं? यदि उपयोगकर्ता इनपुट क्षेत्र में कुछ टाइप करता है, तो स्टाइल को लागू नहीं किया जाना चाहिए। क्या सीएसएस में यह संभव है? मैंने यह कोशिश की:

input[value=""]

Answer 1

यदि केवल क्षेत्र 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 को क्रेडिट)

Comments

.. का उपयोग करके

— नकारात्मक

मैं एक ही चीज चाहता हूं, लेकिन मेरे क्षेत्र की आवश्यकता नहीं है। क्या ऐसा करने का कोई तरीका है?

— जाहिदुल इस्लाम रूहेल

यह शानदार है :)

— क्रिश्चोडज़ी

@ZahidulIslamRuhel बेशक, यह जवाब शीर्ष पर नहीं होना चाहिए। नीचे दिए गए जवाब को देखें stackoverflow.com/a/35593489/11293716

— sijanec

Answer 2

आधुनिक ब्राउज़रों में आप :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/

Comments

यह बहुत बढ़िया बात है! बहुत मददगार :)

— अनब्रेक

@TricksfortheWeb यह इनपुट टैग में उपस्थित होने के लिए एक प्लेसहोल्डर विशेषता (एक मान के साथ) की आवश्यकता लगती है। Chrome में परीक्षण किया गया - सुनिश्चित नहीं है कि यह सभी ब्राउज़रों के लिए मायने रखता है।

— बे्रंड

प्लेसहोल्डर विशेषता को सेट करना होगा। वैसे भी हम प्लेसहोल्डर विशेषता को व्हॉट्सएप के रूप में सेट कर सकते हैं।

— बार्सेलोन्स्की

के अनुसार @Amanpreet caniuse.com/#search=placeholder , इस IE 11 में नहीं होगा काम या तो (या एज)।

— टिम मेलोन

Microsoft ब्राउज़र में समर्थित नहीं है: caniuse.com/#feat=css-placeholder-shown

— Lounge9

Answer 3

CSS में कोई selector नहीं है जो ऐसा करता है। गुण चयनकर्ता गुण मानों से मेल खाते हैं, परिकलित मानों से नहीं।

आपको जावास्क्रिप्ट का उपयोग करना होगा।

Comments

किसी को भी इस उत्तर को बाद में खोजने के लिए: क्वेंटिन गणना मूल्यों के संबंध में सही है, हालांकि: खाली चयनकर्ता है जिसे यहां इस्तेमाल किया जा सकता है और जिसका उचित समर्थन है (IE8 को छोड़कर सभी ब्राउज़र: w3schools.com/cssref/sels-empty.asp के

— कोहेन

:emptyचयनकर्ता केवल खाली तत्वों पर काम करता है, जिसका अर्थ केवल उन तत्वों पर है जिनके बीच खुलने और बंद होने वाले टैग हैं, और एकल टैग तत्व जो हमेशा खाली माना जाता है, उदाहरण के लिए , इसलिए इसे इनपुट तत्वों पर उपयोग नहीं किया जा सकता हैtextarea

— am05mhz

सच नहीं। नीचे देखिए लुकमो का जवाब आवश्यक sttribute और: वैध या: अवैध छद्म चयनकर्ताओं के संयोजन से यह प्राप्त होता है।

— voidstate

सवाल पूछे जाने के समय यह सही उत्तर था। आवश्यक विशेषता केवल 2011 में क्रोम और फ़ायरफ़ॉक्स में उपलब्ध थी, और यह उत्तर 2010 से है। हालांकि समय बदल गया है और यह "सर्वश्रेष्ठ" उत्तर नहीं है, इसलिए मैंने इसे स्वीकार कर लिया है।

— सोजर्ड

Answer 4

किसी फ़ील्ड के मूल्य को अपडेट करना 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">

Answer 5

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

के साथ काम करता है:

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

लेकिन जैसे ही कोई टाइप करना शुरू करेगा आपको स्टाइल नहीं बदलेगी (आपको उसके लिए JS की आवश्यकता है)।

Comments

विश्वसनीय नहीं है क्योंकि एक फ़ील्ड संपादित करने के बाद DOM में मान विशेषता नहीं बदली जाती है। हालांकि, अगर आप इस बारे में परवाह नहीं करते हैं, तो अच्छी चाल - और नवीनतम सफ़ारी, क्रोम, FF और IE में काम करता है ...

— Dunc

पूर्व से मिलान करने के लिए, आप उपयोग कर सकते हैं input[value=""], input:not([value])।

— स्किम

Answer 6

यदि विरासत ब्राउज़र का समर्थन करने की आवश्यकता नहीं है, तो आप , और required, के संयोजन का उपयोग कर सकते हैं ।validinvalid

इस प्रयोग के बारे में अच्छी बात है 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="[e-mail]" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

संदर्भ के लिए, JSFiddle यहां: http://jsfiddle.net/0sf6m46j/

Answer 7

$('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 में। मैंने एक वर्ग जोड़ा और सीएसएस के साथ स्टाइल किया।

.empty { background:none; }

Answer 8

यह मेरे लिए काम किया:

HTML के requiredलिए, इनपुट तत्व में विशेषता जोड़ें

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

CSS के लिए, :invalidखाली इनपुट को लक्षित करने के लिए चयनकर्ता का उपयोग करें

input.my-input-element:invalid {

}

टिप्पणियाँ:

• के बारे में requiredसे w3Schools.com : "। वर्तमान में, यह निर्दिष्ट करता है जब कि एक इनपुट फ़ील्ड प्रपत्र प्रस्तुत करने से पहले भरा जाना चाहिए"

Answer 9

यह प्रश्न कुछ समय पहले पूछा जा सकता है, लेकिन जैसा कि मैंने हाल ही में इस विषय पर उतरा कि क्लाइंट-साइड फॉर्म सत्यापन की तलाश है, और जैसा कि :placeholder-shown समर्थन बेहतर हो रहा है, मैंने सोचा कि निम्नलिखित दूसरों की मदद कर सकते हैं।

इस CSS4 के छद्म वर्ग का उपयोग करने के बेरेन्ड विचार का उपयोग करते हुए, मैं केवल उपयोगकर्ता द्वारा इसे भरने के बाद ट्रिगर किया गया एक फॉर्म सत्यापन बनाने में सक्षम था।

यहाँ कोडपे पर ademo और स्पष्टीकरण दिया गया है: https://codepen.io/johanmouchet/pen/PKxxnQ

Answer 10

यदि आप IE या प्री-क्रोमियम एज का समर्थन नहीं करते हुए खुश हैं (जो कि यदि आप इसे प्रगतिशील वृद्धि के लिए उपयोग कर रहे हैं तो ठीक हो सकता है), आप :placeholder-shownबेरेंड के अनुसार उपयोग कर सकते हैं । ध्यान दें कि क्रोम और सफारी के लिए आपको वास्तव में काम करने के लिए एक गैर-खाली प्लेसहोल्डर की आवश्यकता होती है, हालांकि एक अंतरिक्ष काम करता है।

*,
 ::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>

Answer 11

यह मेरे लिए इनपुट में एक वर्ग का नाम जोड़ने के लिए काम करता है और फिर उस पर सीएसएस नियम लागू करता है:

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

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

Answer 12

मुझे आश्चर्य है कि हमारे पास खाली इनपुट बॉक्स प्राप्त करने के लिए स्पष्ट गुण हैं, इस कोड पर एक नज़र डालें

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

Comments

:emptyकेवल उन तत्वों पर लागू होता है जिनकी कोई संतान नहीं है। इनपुट में बच्चे के नोड्स नहीं हो सकते हैं, इसलिए आपका इनपुट हमेशा लाल बॉर्डर के साथ रहेगा। यह भी देखें इस टिप्पणी

— Zhegan

@NasserHadjloo क्या आपने इसका परीक्षण किया है? बदलने valueसे बच्चे की संख्या में परिवर्तन नहीं होता है।

— jcuenod

@jcuenod बच्चे की संख्या के आधार पर आपका क्या मतलब है? मुझे आपकी बात ठीक नहीं

— लगी

Xml संरचनाओं में, नोड्स नेस्टेड हैं (यानी <parent><child></child></parent>)। आपके पास बस है <input></input>और जैसा कि आप लिखते हैं कि जो बदल रहा है वह एक <value>नोड के अंदर नहीं है, <input>लेकिन एक मूल्य विशेषता है :<input value='stuff you type'></input>

— jcuenod

लेकिन ओपी इसे हासिल करने की कोशिश नहीं कर रहा है।

— jcuenod

Answer 13

मुझे लगता है कि यह एक बहुत पुराना धागा है, लेकिन तब से चीजें थोड़ी बदल गई हैं और इससे मुझे अपनी समस्या को ठीक करने के लिए आवश्यक चीजों का सही संयोजन खोजने में मदद मिली। इसलिए मैंने सोचा कि मैंने जो किया है उसे साझा करूँगा।

समस्या यह थी कि मुझे एक ही सीएसएस के लिए वैकल्पिक इनपुट के लिए आवेदन किया गया था यदि वह भरा हुआ था, जैसा कि मेरे पास आवश्यक था। Css ने psuedo वर्ग का उपयोग किया: मान्य जो css को वैकल्पिक इनपुट पर लागू करता है, जब भरा नहीं होता है।

यह मैंने इसे कैसे तय किया;

एचटीएमएल

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

सीएसएस

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