क्रोम में काम नहीं कर रहे विकल्प पैडिंग का चयन करें

Question

क्रोम में काम नहीं कर रहे विकल्प पैडिंग का चयन करें

<style>
select option { padding:5px 0px; }
</style>    
<select>
<option>1</option>
<option>2</option>
<option>3</option> 
</select>

Comments

आप क्या हासिल करने का प्रयास कर रहे हैं? प्रत्येक विकल्प को 5px द्वारा गद्देदार किया जाना है? या सिर्फ मुख्य बॉक्स?

— DeeKayy90

हां ... मुझे विकल्प मूल्य के लिए पैडिंग की जरूरत है

— पीयूष मारवानिया

भले ही यह कड़ाई से पैडिंग नहीं है, बाएं पैडिंग पैडिंग के लिए आप & nbsp का उपयोग कर सकते हैं; जबकि यह ठीक हो जाता है: jsfiddle.net/chech/u5rcheqf/1

— chech

संभावित टैग का

— टायलरएच

Answer 1

मुझे बस क्रोम में चुनिंदा इनपुट पर पेडिंग लगाने का एक तरीका मिला

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px;
}

वर्तमान क्रोम में काम करने लगता है 39.0.2171.71 (64-बिट) और सफारी (मैंने केवल एक मैक पर यह परीक्षण किया है)।

यह चुनिंदा इनपुट में जोड़े गए डिफ़ॉल्ट स्टाइल को हटाने के लिए लगता है (यह ड्रॉप डाउन एरो भी हटा दिया गया है), लेकिन फिर आप इसे क्रोम के बिना अपने स्टाइल का उपयोग कर सकते हैं।

मैं यहाँ से कोड का उपयोग करते हुए इस फिक्स को ठोकर मार गया: http://fettblog.eu/style-select-elements/

Comments

एक अन्य समाधान जो सभी ब्राउज़र में काम करता है ,  चुनिंदा सूची में पहला विकल्प जोड़ रहा है यह और यह , होप मदद करता है।

— शैजू टी

@stom जो बाएँ और दाएँ गद्दी के लिए काम कर सकता है, लेकिन मुझे नहीं लगता कि यह शीर्ष और नीचे की गद्दी के लिए काम करेगा।

— rmmoul

यह अब काम नहीं कर रहा है, कम से कम मेरी मशीन में! :)

— नूनो क्रूज़

आप select2 या चुना जैसे प्लगइन का भी उपयोग कर सकते हैं जो आपके <select><option/></select>तत्वों को पूरी तरह से अनुकूलन योग्य <ul><li/></ul>तत्वों में परिवर्तित करते हैं। इस तरह से आप अपने अन्य इनपुट फ़ील्ड या सामान्य UI से मेल खाते हुए अपने सभी ड्रॉपडाउन को स्टाइल कर सकते हैं।

— टाड वोहलरप

तीर इस के साथ खो जाता है :(

— राउल एच

Answer 2

यह सरल हैक पाठ को इंडेंट करेगा। अच्छा काम करता है।

select {
  text-indent: 5px;
}

Comments

यह चयन को स्वयं जोड़ता है, लेकिन विकल्पों में नहीं। और विकल्प में टेक्स्ट-इंडेंट लागू करने से क्रोम 64 में काम नहीं करता है।

— chris.ribal

क्रोम 71 इसे "अज्ञात संपत्ति" कहता है।

— मार्क

Answer 3

ऐसा लगता है

दुर्भाग्य से, वेबकिट ब्राउज़र विकल्प टैग की स्टाइलिंग का समर्थन नहीं करते हैं।

आपको यहाँ इसी तरह का प्रश्न मिल सकता है

1. टैग के विकल्प तत्व का चयन कैसे करें?
2. Chrome और Safari पर चयनित ड्रॉप डाउन html में स्टाइलिंग विकल्प मूल्य काम नहीं करता है

सबसे व्यापक रूप से उपयोग किया जाने वाला क्रॉस ब्राउज़र समाधान उल ली का उपयोग करना है

आशा है कि इससे सहायता मिलेगी!

Comments

जवाब के लिए धन्यवाद। यह मेरे लिए आश्चर्यजनक है कि वेबसाइटों, HTML और CSS के बाद इतने सालों के बाद, कि वहाँ अभी भी कुछ का चयन करने में सक्षम होने की कमी है जैसे चुनिंदा विकल्प पैडिंग। स्टाइलिंग और पोजिशनिंग तत्वों को निराशा हो सकती है, फिर भी एंड्रॉइड विकास में, यह बहुत आसान है। मुझे ऐसा नहीं लगता कि HTML और CSS के साथ वेब वातावरण डेस्कटॉप और देशी मोबाइल वातावरण की तुलना में "अधूरा", "कार्य-प्रगति" क्यों लगता है।

— ब्रायन

शायद निकट भविष्य में वेब और अधिक सुंदर होगा और डेवलपर्स को छाया डोम के हाथ की मदद मिलेगी - robdodson.me/shadow-dom-styles :) उम्मीद है कि डेवलपर्स फॉर्म तत्वों की आंतरिक परत पर नियंत्रण प्राप्त करेंगे। RIP IE हालांकि।

— प्रवीण वेचल

@ ब्रायन वेब एक पुरानी तकनीक है, और जैसे कि इसमें कुछ पुराने विचार हैं जिन्हें सुधार नहीं किया गया है। ब्राउज़र समर्थन के कारण, नई सुविधाएँ हमेशा किसी तक पहुंचने के लिए धीमी हो गई हैं, और असंवेदनशील की कमी के कारण (आस-पास के मौजूदा काम हैं, जो लोग करते हैं, और अंतिम उपयोगकर्ता ध्यान नहीं देते हैं कि इन ब्राउज़रों की कमी है) कुछ भी नहीं बदलता है।

— csga5000

Answer 4

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

select {
    max-height: calc(1.2em + 24px);
    height: calc(1.2em + 24px);
}


max-height: calc(your line height + (top + bottom padding));
height: calc(your line height + (top + bottom padding));

Comments

यह अब तक का सबसे अच्छा समाधान है। लेकिन यह केवल मेरे लिए काम किया जब यह height: calc(1.2em + 24px);नहीं हैmax-height: calc(1.2em + 24px);

— जूलियस

जूलियस मैं सभी प्रमुख ब्राउज़रों के साथ जांच कर रहा हूं जो अधिकतम ऊंचाई के साथ अच्छी तरह से काम कर रहे हैं। लेकिन ऊंचाई विशेषता का उपयोग करना भी एक अच्छा अवसर है।

— अली सूफियान

Answer 5

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

सीएसएस:

ul {
    width: 50px;
    height: 20px;
    border: 1px solid black;
    display: block;

}

li {
    padding: 5px 0px;
    width: 50px;
    display: none;

}

HTML:

<ul id="customComboBox">
&nbsp
    <li>Test</li>
    <li>Test 2</li>
    <li>Test 3</li>
</ul>

स्क्रिप्ट:

$(document).ready(function(){
    $("#customComboBox").click(function(){
        $("li").toggle("slow");
    });
});

डेमो

Comments

@PiyushMarvaniya मुझे समझ में आता है, हालाँकि जैसा कि मुझे याद है कि चुनिंदा विकल्प के साथ एकल तत्वों को संशोधित करना संभव नहीं है। इसीलिए मैंने एक विकल्प पेश किया।

— DeeKayy90

यह उदाहरण कीबोर्ड नेविगेशन (तीर या मैक शॉर्टकट), वेब एक्सेसिबिलिटी टूल प्रदान नहीं करता है।

— पियोत्र żużecki

फिर, सवाल कस्टम ड्रॉपडाउन बनाने का नहीं था, इसे पैडिंग में जोड़ना था। मैंने ओपी के लिए उनकी आवश्यकताओं के अनुसार निर्माण के लिए एक पुण्य आधार दिया है, लेकिन मैं उनके लिए एक कस्टम नियंत्रण नहीं बनाऊंगा। =)

— डेकेय्या 90

यदि आप एक UL / LI ड्रॉपडाउन के साथ जाने वाले हैं तो मैं बस बूटस्ट्रैप के ड्रॉपडाउन विजेट का उपयोग करने का सुझाव दूंगा। संस्करण 2 और 3 समर्थन भूमिका = "मेनू" और तीर कुंजियों को सक्षम करने के लिए भूमिका = "नेविगेशन"। कुछ ऐसा उपयोग करने के लिए समझ में आता है जिसे अच्छी तरह से IMO किया गया है।

— mbokil

@mbokil +1, निश्चित रूप से पहिया को रोकने के बजाय एक अच्छा विकल्प है, वहां क्या है इसका उपयोग करें।

— DeeKayy90

Answer 6

यह optionप्रविष्टि पर काम नहीं कर रहा है क्योंकि यह एक "सिस्टम" उत्पन्न ड्रॉप-डाउन मेनू है लेकिन आप paddingएक चयन का सेट कर सकते हैं।

बस अपने सीएसएस में box-sizingसंपत्ति रीसेट करें content-box।

का डिफ़ॉल्ट मान selectहै border-box।

select {
 box-sizing: content-box;
 padding: 5px 0;
}

Comments

आप Chrome 75

— danday74

Answer 7

मैं आपकी समस्या के लिए एक छोटी सी चाल है। लेकिन इसके लिए आपको जावास्क्रिप्ट का उपयोग करना होगा। यदि आपको पता चला है कि ब्राउज़र हर विकल्प के बीच क्रोम डाला " डमी " विकल्प है। उन " डमी " विकल्पों के लिए एक नई कक्षा दें और उन्हें अक्षम करें। " डमी " विकल्पों की ऊंचाई आप फ़ॉन्ट-आकार की संपत्ति के साथ परिभाषित कर सकते हैं।

सीएसएस:

option.dummy-option-for-chrome {
  font-size:2px;
  color:transparent;
}

स्क्रिप्ट:

function prepareHtml5Selects() {

  var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
  if(!is_chrome) return;

  $('select > option').each(function() {
    $('<option class="dummy-option-for-chrome" disabled></option>')
     .insertBefore($(this));
  });
  $('<option class="dummy-option-for-chrome" disabled></option>')
    .insertAfter($('select > option:last-child'));
}

Answer 8

पैडिंग नहीं है लेकिन अगर आपका लक्ष्य केवल इसे बड़ा बनाना है, तो आप इसे बढ़ा सकते हैं font-size। और इसका उपयोग करने font-size-adjustसे फ़ॉन्ट-आकार वापस सामान्य रूप से कम हो जाता है और विकल्पों पर नहीं, इसलिए यह optionबड़ा बनाता है ।

सुनिश्चित नहीं है कि यह सभी ब्राउज़रों पर काम करता है, या वर्तमान में काम करता रहेगा।

Chrome 85 और फ़ायरफ़ॉक्स 81 पर परीक्षण किया गया।

select {
    font-size: 2em;
    font-size-adjust: 0.3;
}

<label>
  Select: <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
</label>

Answer 9

नो जेकरी - नो थर्ड पार्टी js फाइल

function clickComboBox(){
  comboOpt = document.getElementsByClassName("opt");
  for (i = 0; i < comboOpt.length; i++) {
      if (comboOpt[i].style.display === "block") {
        comboOpt[i].style.display = "none";
      } else {
        comboOpt[i].style.display = "block";
      }
  }    
}
function clickOpt(value1,text1){
  document.getElementById("selectedValue").value=value1;
  document.getElementById("customComboBox").innerHTML=text1;
  clickComboBox();
}

#customComboBox{
width: 150px;
height: 20px;
border: 1px solid #CCCCCC;
display: block;
padding: 2px 5px;
}
.opt{
padding: 5px 0px;background-color:#CCCCCC;
width: 160px;
display: none;
}

<div id="customComboBox"  onClick="clickComboBox()">
-Select Value-
</div>
<input type="hidden" id="selectedValue">
  <div class="opt">
  <div onClick="clickOpt('01','Test1')"><img  src="https://pasteboard.co/J6940Vs.png" height="20">Test1</div>
  <div style="padding-left:10px;" onClick="clickOpt('02','Test2')">Test2</div>
  <div onClick="clickOpt('03','Test3')">Test3</div>
  </div>

स्मार्ट कोड - jquery का उपयोग करें

Answer 10

किसी भी विकल्प का मनमाना इंडेंटेशन

यदि आप केवल यादृच्छिक, मनमाने <option />तत्वों को इंडेंट करना चाहते हैं, तो आप उपयोग कर सकते हैं  , जिसमें यहां पोस्ट किए गए समाधानों की सबसे बड़ी क्रॉस-ब्राउज़र संगतता है ...

.optionGroup {
  font-weight: bold;
  font-style: italic;
}

<select>
    <option class="optionGroup" selected disabled>Choose one</option>
    <option value="sydney" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Sydney</option>
    <option value="melbourne" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Melbourne</option>
    <option value="cromwell" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Cromwell</option>
    <option value="queenstown" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Queenstown</option>
</select>

विकल्पों का इंडेंटेशन करने का आदेश दिया

लेकिन अगर आपने अपने डेटा में कुछ क्रमबद्ध, संरचना का आदेश दिया है , तो यह अनुशंसा की जाती है कि आप <optgroup/>वाक्यविन्यास का उपयोग करें ...।

HTML तत्व किसी तत्व के भीतर विकल्पों का समूह बनाता है। (स्रोत: MDN वेब डॉक्स:<optgroup> )

<select>
    <optgroup label="Australia" default selected>
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
    </optgroup>
    <optgroup label="United Kingdom">
        <option value="london">London</option>
        <option value="glasgow">Glasgow</option>
    </optgroup>
</select>

दुर्भाग्य से, केवल एक <optgroup />स्तर की अनुमति है और वर्तमान में ब्राउज़रों द्वारा समर्थित है। (स्रोत: w3.org ।) व्यक्तिगत रूप से, मैं कल्पना के उस हिस्से को टूटा हुआ मानूंगा, लेकिन आप हमेशा  ऊपर दिए गए ट्रिक का उपयोग करने के साथ तीसरे, चौथे, आदि का स्तर बढ़ा सकते हैं।

Answer 11

font-sizeजरूरत पड़ने पर आप विकल्प के लिए संपत्ति का उपयोग कर सकते हैं ।

Comments

यह क्रोम में काम करने लगता है, लेकिन फ़ायरफ़ॉक्स में नहीं (नवीनतम संस्करण) फ़ायरफ़ॉक्स अभी भी ड्रॉपडाउन से पहले केवल अचयनित बॉक्स पर शैली को लक्षित कर रहा है।

Answer 12

बस चयनित टैग की ऊंचाई निर्धारित करें

select{
    height: 30px;
    max-height: 30px;
}

Comments

यह सिर्फ वही दोहराता है जो अन्य उत्तर अलारे ने कहा, क्या आप इसे कुछ नया दे सकते हैं?

— तिवारी

Answer 13

आपको सिलेक्‍ट ऑप्‍शन के बजाय अपने CSS के लिए सिलेक्‍ट करना चाहिए।

select { 
padding: 10px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

अधिक स्टाइलिंग विकल्पों के लिए CSS3 के साथ स्टाइलिंग सिलेक्ट बॉक्स का यह लेख देखें ।