इनपुट बनाने के लिए स्वचालित रूप से 'आवश्यक फ़ील्ड' तारांकन जोड़ने के लिए CSS का उपयोग करें

Question

दुर्भाग्यपूर्ण तथ्य को दूर करने का एक अच्छा तरीका क्या है कि यह कोड वांछित के रूप में काम नहीं करेगा:

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

एक आदर्श दुनिया में, सभी आवश्यक inputs को थोड़ा तारांकन संकेत मिलता है जो बताता है कि क्षेत्र की आवश्यकता है। यह तत्व के बाद से सीएसएस को सम्मिलित करने के बाद असंभव है, तत्व के बाद नहीं, बल्कि कुछ ऐसा है जो आदर्श होगा। हजारों आवश्यक फ़ील्ड वाली साइट पर, मैं इनपुट के सामने तार को एक पंक्ति में एक परिवर्तन (एक :afterसे :before) के साथ स्थानांतरित कर सकता हूं या मैं इसे लेबल के अंत में स्थानांतरित कर सकता हूं ( .required label:after) या लेबल के सामने, या युक्त बॉक्स पर एक स्थिति, आदि ...

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

अन्त में, यह अतिरिक्त मार्कअप नहीं जोड़ता है।

क्या कोई अच्छा समाधान है जो असंभव कोड के सभी या अधिकांश फायदे हैं?

Comments

शायद एक तारांकन चिह्न की पृष्ठभूमि छवि लागू करें?

— वलमास

इनपुट फ़ील्ड को वास्तव में आवश्यक बनाने के लिए , डेवलपर.required<input...

— mozilla.org/en-US/docs/Web/HTML/Element/input/… पर

Answer 1

क्या आपके मन में ऐसा था?

http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

.required:after {
  content:" *";
  color: red;
}

<label class="required">Name:</label>
<input type="text">

Https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements देखें

Comments

यह कई स्थितियों में एक अच्छा समाधान है, हालांकि यह काम नहीं करता है यदि रूपों को पूरा करने के लिए पूर्ण स्थिति या फ्लोट्स का उपयोग किया जा रहा है (जैसे jsfiddle.net/erqrN/2 )। मैं वास्तव में अपने रूपों को पूरा करने के लिए पूर्ण स्थिति का उपयोग कर रहा हूं। मैं पूरी तरह से स्थिति बना सकता था, *लेकिन इसका मतलब यह होगा कि मुझे फॉर्म इनपुट की हर लंबाई के लिए मैन्युअल रूप से दूरी तय करनी होगी, और कोई भी लचीला इनपुट नहीं कर पाएंगे।

— ब्रेंटनस्ट्राइन

@brentonstrine ऑड हैं, आपको अपने फ़ॉर्म को पूरा करने के लिए पूर्ण स्थिति का उपयोग नहीं करना चाहिए। हालांकि आमतौर पर उपयोग किया जाता है, पूर्ण स्थिति उत्तरदायी नहीं है (जब तक कि आपके पास जेएस मॉडेम पर DOM मॉडिफाई न हो) जबकि समान प्रभाव हमेशा स्थिर या सापेक्ष स्थिति का उपयोग करके प्राप्त किया जा सकता है, जो डिजाइन में उत्तरदायी हो सकता है। पाठक, कृपया फार्म तत्वों जैसी चीजों पर पूर्ण स्थिति जैसे शैलियों का उपयोग करने से बचें, क्योंकि यह स्थिति के लिए एक बहुत ही पुरातन दृष्टिकोण है। मुझे पता है कि आपकी टिप्पणी बहुत पुरानी थी, लेकिन यह पाठकों के लिए है।

— वेबवैंडर

तारांकन लिंक्स का उपयोग नहीं करता है , जो एक पहुंच समस्या हो सकती है।

— डेव जार्विस

क्या मैं इसे अपने .css में डाल सकता हूँ? यदि हाँ, तो क्या आप एक उदाहरण दे सकते हैं? मुझे यह नहीं पता था कि : वाक्य रचना

— लियोनार्डो माफ़ेई

@LeonardoMaffei यकीन है, पर एक नजर है developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements और developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

— मैक्स Girkens

Answer 2

.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

अपनी सटीक संरचना के साथ फिडेल: http://jsfiddle.net/bQ859/

Comments

आपको अभी भी अपने लेबल पर कक्षाओं की आवश्यकता है, वास्तव में दस्तावेज़ संरचना को साफ रखने का एकमात्र तरीका पृष्ठभूमि छवि विधि है। हालांकि संक्षिप्त।

— हेनरी की कैट

Answer 3

यद्यपि यह स्वीकृत उत्तर है, कृपया मुझे अनदेखा करें और :afterनीचे दिए गए वाक्यविन्यास का उपयोग करें। मेरा समाधान सुलभ नहीं है।

---

तारांकन के चित्र की पृष्ठभूमि छवि का उपयोग करके और लेबल / इनपुट / बाहरी डिव की पृष्ठभूमि सेट करके और तारांकन छवि के आकार के एक गद्दी के आकार का उपयोग करके एक समान परिणाम प्राप्त किया जा सकता है। कुछ इस तरह:

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

यह टेक्स्ट बॉक्स में तारांकन चिह्न लगाएगा, लेकिन यदि आप थोड़ी कम सुरुचिपूर्ण हैं, तो div.requiredइसके बजाय उसी को रखना .required inputहोगा जो आप देख रहे हैं।

इस विधि को अतिरिक्त इनपुट की आवश्यकता नहीं है।

Comments

हालांकि, यह ध्यान देने योग्य है कि यह बहुत स्क्रीन-रीडर के अनुकूल नहीं है। इस लिहाज से मैक्स का जवाब काफी बेहतर है। वास्तव में ज्यादातर मामलों में, मैक्स का उत्तर अधिक आदर्श है - केवल ओपी के लिए नहीं।

— जयपेगी

Answer 4

इसे पूरी तरह से इनपुट में डालने के लिए जैसा कि निम्नलिखित छवि पर दिखाया गया है:

मुझे निम्नलिखित दृष्टिकोण मिला:

.asterisk_input::after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }

 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form> 

जिस साइट पर मैं काम करता हूं उसे निश्चित लेआउट का उपयोग करके कोडित किया जाता है, इसलिए यह मेरे लिए ठीक था।

मुझे यकीन नहीं है कि यह तरल डिजाइन के लिए अच्छा है।

Comments

हाँ, यह वही दिखता है। अंतर यह है कि उन्होंने पृष्ठभूमि-छवि का उपयोग किया। (या मैंने कुछ गलत समझा है)

— तेबे

खाली स्पैन मार्कअप को कुछ इस तरह से जोड़ना सीएसएस के पूरे बिंदु को हरा देता है, है ना?

— जेसन सिल्वर

स्पैन की कीमत कुछ भी नहीं है, यह एक आम चाल है चीजों को सरल बनाने के लिए जो अक्सर पुस्तकालयों की विशाल मात्रा के बीच पाई जाती हैं

— टेबे

Answer 5

सीएसएस में लिखें

.form-group.required .control-label:after {content:"*";color:red;}

और HTML

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>

Comments

मुझे लगता है कि आपका दृष्टिकोण केवल तभी काम करता है जब आप नियंत्रण-लेबल वर्ग को लेबल टैग की तरह असाइन करते हैं <label class="control-label">...</label>। लेकिन यह काम करता है (Y)

— मार्कोले

मैंने आपको केवल उदाहरण उदाहरण उद्देश्य नियंत्रण-लेबल Mr.creep-story

— Kondal

इसके पास पुराना छद्म तत्व सिंटैक्स है और साथ ही डिव सूप की कोई आवश्यकता नहीं है। मैंने एक उत्तर जोड़ा है जो फ़ॉर्म को div और वर्ग मुक्त रखता है।

— हेनरी की कैट

Answer 6

input[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}

Comments

दो radial-gradientशर्तें क्यों हैं background-image? मैं इस वाक्यविन्यास को developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient के साथ शादी करने के लिए नहीं कर सकता, लेकिन जब मैं इसे आज़माता हूं तो सही ढंग से काम कर रहा होता है।

— क्रिस वॉल्श

इसे पसंद किया जाता है क्योंकि इसे काम करने के लिए किसी अतिरिक्त मार्कअप की आवश्यकता नहीं होती है। मैं एक समाधान देखना चाहता हूं, जिसका उपयोग किया गया है: हालांकि, अधिक अनुकूलन योग्य विकल्पों के लिए।

— जेसन सिल्वर

Answer 7

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

छवि में कुछ 20px का स्थान है जो चुनिंदा ड्रॉपडाउन तीर के साथ ओवरलैप नहीं है

और यह इस तरह दिखता है:

Comments

यह प्रेरणादायक है, पृष्ठभूमि की छवि को लोड करने से बचने का मेरा तरीका देखें।

— हेनरी की कैट

Answer 8

JQuery और CSS का प्रयोग करें

jQuery(document).ready(function() {
 jQuery("[required]").after("<span class='required'>*</span>");
});

.required {
    position: absolute;
    margin-left: -10px;
    color: #FB0000;
    font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>

Answer 9

मुझे लगता है कि यह कुशल तरीका है, इतना सिरदर्द क्यों है

    <div class="full-row">
     <label for="email-id">Email Address<span style="color:red">*</span></label>
  <input type="email" id="email-id" name="email-id"  ng-model="user.email" >
    </div> 

Comments

ध्यान दें कि स्पान लेबल टैग पर लगाया गया है न कि इनपुट टैग पर। यदि इनपुट टैग के लिए अपील की जाती है, तो लाल तारांकन अगली पंक्ति में चला जाता है - जो कि अधिकांश

— देवता

Answer 10

यह 2019 है और इस समस्या के पिछले उत्तर उपयोग नहीं कर रहे हैं

1. सीएसएस ग्रिड
2. सीएसएस चर
3. एचटीएमएल 5 तत्व
4. CSS में SVG

सीएसएस ग्रिड 2019 में फॉर्म करने का तरीका है क्योंकि आप अपने लेबलों को अतिरिक्त इनपुट, स्पैन, स्पैन के साथ और अन्य अवशेषों के बिना अपने इनपुट से पहले ले सकते हैं।

यहाँ हम न्यूनतम CSS के साथ जा रहे हैं:

उपरोक्त के लिए HTML:

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

प्लेसहोल्डर पाठ भी जोड़ा जा सकता है और अत्यधिक अनुशंसित है। (मैं इस मध्य रूप का उत्तर दे रहा हूं)।

अब CSS चरों के लिए:

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

प्रपत्र तत्वों के लिए CSS:

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

फॉर्म सीएसएस ग्रिड में ही होना चाहिए:

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

कॉलम के लिए मानों को 1 / -1 के सेट के रूप में टैग जैसे किसी भी चीज़ के साथ 1fr autoया उसके 1frसाथ सेट किया जा सकता है <p>। आप अपने मीडिया प्रश्नों में परिवर्तन करते हैं ताकि आपके पास इनपुट बॉक्स मोबाइल पर पूर्ण चौड़ाई और डेस्कटॉप पर ऊपर के अनुसार हो। यदि आप सीएसएस चर दृष्टिकोण का उपयोग करके चाहें तो मोबाइल पर अपना ग्रिड अंतर भी बदल सकते हैं।

जब बक्से वैध होते हैं तो आपको तारांकन के बजाय हरे रंग की टिक मिलनी चाहिए।

CSS में SVG ब्राउज़र का तारांकन करने के लिए सर्वर की एक गोल यात्रा करने से बचाने का एक तरीका है। इस तरह से आप तारांकन को ठीक कर सकते हैं, यहाँ के उदाहरण एक असामान्य कोण पर हैं, आप इसे संपादित कर सकते हैं क्योंकि उपरोक्त SVG आइकन पूरी तरह से पठनीय है। केंद्र के ऊपर या नीचे तारांकित करने के लिए व्यूबॉक्स में भी संशोधन किया जा सकता है।

Answer 11

.asterisc {
  display: block;
  color: red;
  margin: -19px 185px;
}

<input style="width:200px">
<span class="asterisc">*</span>

Answer 12

यह उदाहरण एक लेबल के सामने एक तारांकन चिह्न रखता है जो उस विशेष इनपुट को आवश्यक फ़ील्ड के रूप में प्रदर्शित करता है। मैंने CSS गुणों को% और em के उपयोग से सेट किया है ताकि मेरा वेबपेज उत्तरदायी हो। आप चाहें तो px या अन्य निरपेक्ष इकाइयों का उपयोग कर सकते हैं।

#name {
   display: inline-block;
   margin-left: 40%;
   font-size:25px;
    
}
.nameinput{
   margin-left: 10px;
   font-size:90%;
   width: 17em;
   
}

.nameinput::placeholder {
  font-size: 0.7em;
  vertical-align: middle;
}

#name p{
   margin:0;
   border:0;
   padding:0;
   display:inline-block;
   font-size: 40%;
   vertical-align: super;
}

<label id="name" value="name">
<p>*</p> 
Name:  <input class="nameinput" type="text" placeholder="Enter your name" required>
</label>

Comments

एसओ में आपका स्वागत है! जब आप एक नए बिंदु को देखने के लिए एक उत्तर देते हैं, तो अपना उत्तर समझाने की कोशिश करें, न कि केवल स्पष्टीकरण के बिना एक कोड रखें।

— डेविड गार्सिया बोदगो

Answer 13

आपको क्या चाहिए: आवश्यक चयनकर्ता - यह 'आवश्यक' विशेषता के साथ सभी क्षेत्रों का चयन करेगा (इसलिए किसी भी अतिरिक्त वर्गों को जोड़ने की आवश्यकता नहीं है)। फिर - अपनी आवश्यकताओं के अनुसार शैली आदानों। आप 'का उपयोग कर सकते हैं:' चयनकर्ता के बाद और अन्य उत्तरों के बीच सुझाए गए तरीके से तारांकन चिह्न जोड़ें

Answer 14

आप HTML कोड को एक div टैग में संलग्न करके वांछित परिणाम प्राप्त कर सकते हैं जिसमें "फॉर्म-ग्रुप" वर्ग के बाद "आवश्यक" वर्ग शामिल है। * हालांकि यह तभी काम करता है जब आपके पास बूटस्ट्रैप हो।

<div class="form-group required">
    <div class="required">
        <label>Name:</label>
        <input type="text">
    </div>
  <div>

Answer 15

जो लोग यहां समाप्त होते हैं, लेकिन उनके पास jQuery है:

// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')

// css
.red-star { color: red; }

Comments

यदि आप बिना js के ही परिणाम प्राप्त कर सकते हैं तो js का उपयोग क्यों करें?

— विटाली ज़ेडेनविच

@VitalyZdanevich क्योंकि आपको उस समाधान के साथ एक अनावश्यक पृष्ठभूमि छवि को लोड करने की आवश्यकता है। इसके अलावा, मेरे पास पहले से ही जेएस है (जैसा कि कई अन्य भी होंगे)।

— एंडी हेडन