2 सवाल: इस कोड में इनपुट टेक्स्ट को सही तरीके से कैसे प्रदर्शित किया जाए

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

मैं कुछ पाठ और इनपुट बॉक्स के साथ इनलाइन, 3 विकल्प "कस्टम" प्रदर्शित करने का प्रयास कर रहा हूं ताकि यह पढ़े।

कस्टम: मैं चाहूंगा [] x []।

हालाँकि, पाठ बक्से दिखाई नहीं दे रहे हैं, संभवत: क्योंकि मेरे पास एक डिस्प्ले है: छुपाएं।

मैंने जोड़ने का प्रयास किया है

#product .sizes input:not([type:"text"]) 
{
  display: none;
}

हालाँकि, एक विशाल पाठ बॉक्स दिखाई देता है - इसलिए एक नुकसान में कि क्या करना है। शायद कुछ सरल है, लेकिन मैं अभी इसका पता नहीं लगा सकता।

किसी भी मदद की सराहना की जाएगी!

#product .sizes label{
	  position: relative;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1.5rem;
	  text-align: center;
	  height: 80px;
	  line-height: 80px; 
	  display: block;
	  cursor: pointer;
	  border: 3px solid #2fcc71;
	  border-radius: 10px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
#product .sizes label span{
	display: inline-block !important;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1rem;
	  text-align: left;
	  height: 10px !important;
	  line-height: 10px !important; 	  
	}	
	
#product .sizes input:checked + label{
	  border: 3px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	}
	
#product .sizes input:checked + label:after {
	  content: "\2713";
	  width: 40px;
	  height: 40px;
	  line-height: 40px;
	  border-radius: 100%;
	  border: 2px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	  z-index: 999;
	  position: absolute;
	  top: -10px;
	  right: -10px;
	}

#product .sizes input {
	display: none;
}   
<form id="product">
    <section class="sizes">
  			<div id="fixedSize"></div>
  			<div id="ChooseSize">
  				<input type='radio' name='radio_size' id='size1' value='1'><label class='size1-label cell' for='size1'>Standard</label>
  				<input type='radio' name='radio_size' id='size2' value='2'><label class='size2-label cell' for='size2'>Different</label>
  				<input type='radio' name='radio_size' id='size3' value='3'><label class='size3-label cell' for='size3'>Custom: I would like <input type="size_h"> x <input name="size_w" type="text"></label>
  			</div>	
		</section>  
</form>    
    
1
2 उत्तर                              2                         

आपके सीएसएस में, आप किसी लेबल के अंदर किसी भी इनपुट को लक्षित कर सकते हैं:

#product .sizes label > input {
   display: inline;
}

इस चयनकर्ता का उपयोग करते हुए, आप तब इनपुट को स्टाइल कर सकते हैं जैसा आप चाहते हैं। width का उपयोग यह नियंत्रित करने के लिए कि इनपुट कितने बड़े हैं ...

#product .sizes label{
	  position: relative;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1.5rem;
	  text-align: center;
	  height: 80px;
	  line-height: 80px; 
	  display: block;
	  cursor: pointer;
	  border: 3px solid #2fcc71;
	  border-radius: 10px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
#product .sizes label span{
	display: inline-block !important;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1rem;
	  text-align: left;
	  height: 10px !important;
	  line-height: 10px !important; 	  
	}	
	
#product .sizes input:checked + label{
	  border: 3px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	}
	
#product .sizes input:checked + label:after {
	  content: "\2713";
	  width: 40px;
	  height: 40px;
	  line-height: 40px;
	  border-radius: 100%;
	  border: 2px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	  z-index: 999;
	  position: absolute;
	  top: -10px;
	  right: -10px;
	}

#product .sizes input {
	display: none;
}
#product .sizes label > input {
   display: inline;
   width: 30px;
}
<form id="product">
    <section class="sizes">
  			<div id="fixedSize"></div>
  			<div id="ChooseSize">
  				<input type='radio' name='radio_size' id='size1' value='1'><label class='size1-label cell' for='size1'>Standard</label>
  				<input type='radio' name='radio_size' id='size2' value='2'><label class='size2-label cell' for='size2'>Different</label>
  				<input type='radio' name='radio_size' id='size3' value='3'><label class='size3-label cell' for='size3'>Custom: I would like <input type="size_h"> x <input name="size_w" type="text"></label>
  			</div>	
		</section>  
</form>
    
1
2019-05-08 16: 28: 01Z
  1. आपका बहुत-बहुत धन्यवाद!
    2019-05-08 16: 45: 15Z

    आप विशेष रूप से केवल उन तत्वों को चुनने के लिए css की अनुमति देने के लिए रेडियो इनपुट में एक वर्ग जोड़ सकते हैं:

    <input type='radio' class='radio' ... >
    
    #product .sizes input.radio {
        display: none;
    }
    

    वैकल्पिक रूप से, आप उन इनपुट को आईडी दे सकते हैं जिन्हें आप दिखाना चाहते हैं और सभी इनपुटों को छिपाने के बाद सीएसएस को ओवरराइड करें:

    <input type='radio' name='radio_size' id='size3' value='3'><label class='size3-label cell' for='size3'>Custom: I would like <input id="input-h" type="size_h"> x <input id="input-w" name="size_w" type="text"></label>
    
    #input-w, #input-h {
        display: inline;
    }
    

    #product .sizes label{
    	  position: relative;
    	  color: #2fcc71;
    	  background-color: #fff;
    	  font-size: 1.5rem;
    	  text-align: center;
    	  height: 80px;
    	  line-height: 80px; 
    	  display: block;
    	  cursor: pointer;
    	  border: 3px solid #2fcc71;
    	  border-radius: 10px;
    	  -webkit-box-sizing: border-box;
    	  -moz-box-sizing: border-box;
    	  box-sizing: border-box;
    	}
    	
    #product .sizes label span{
    	display: inline-block !important;
    	  color: #2fcc71;
    	  background-color: #fff;
    	  font-size: 1rem;
    	  text-align: left;
    	  height: 10px !important;
    	  line-height: 10px !important; 	  
    	}	
    	
    #product .sizes input:checked + label{
    	  border: 3px solid #333;
    	  background-color: #2fcc71;
    	  color: #fff;
    	}
    	
    #product .sizes input:checked + label:after {
    	  content: "\2713";
    	  width: 40px;
    	  height: 40px;
    	  line-height: 40px;
    	  border-radius: 100%;
    	  border: 2px solid #333;
    	  background-color: #2fcc71;
    	  color: #fff;
    	  z-index: 999;
    	  position: absolute;
    	  top: -10px;
    	  right: -10px;
    	}
    
    #product .sizes input.radio {
        display: none;
    }   
    <form id="product">
        <section class="sizes">
      			<div id="fixedSize"></div>
      			<div id="ChooseSize">
      				<input type='radio' class='radio' name='radio_size' id='size1' value='1'><label class='size1-label cell' for='size1'>Standard</label>
      				<input type='radio' class='radio' name='radio_size' id='size2' value='2'><label class='size2-label cell' for='size2'>Different</label>
      				<input type='radio' class='radio' name='radio_size' id='size3' value='3'><label class='size3-label cell' for='size3'>Custom: I would like <input name="size_h" type="text"> x <input name="size_w" type="text"></label>
      			</div>	
    		</section>  
    </form>    
        
    0
    2019-05-08 16: 29: 16Z
स्रोत रखा गया यहाँ