<select> के साथ समस्या और: वेबकिट

Question

में सीएसएस के साथ मैं छद्म के साथ एक चयन बॉक्स पर कुछ शैली जोड़ना चाहता हूं: उसके बाद (2 भागों के साथ और मेरे चित्रों के बिना मेरा चयन बॉक्स स्टाइल करने के लिए)। यहां HTML है:

<select name=""> 
    <option value="">Test</option> 
</select> 

और यह काम नहीं करता है। मुझे नहीं पता कि मुझे डब्ल्यू 3 सी चश्मा में जवाब क्यों नहीं मिला।

select { 
    -webkit-appearance: none; 
    background: black; 
    border: none; 
    border-radius: 0; 
    color: white; 
} 

select:after { 
    content: " "; 
    display: inline-block; 
    width: 24px; height: 24px; 
    background: blue; 
} 

तो यह सामान्य है या वहाँ एक चाल है: यहाँ सीएसएस है?

Answer 1

मैंने इस बड़े पैमाने पर जांच नहीं की है, लेकिन मुझे लगता है कि यह संभवतः (अभी तक?) संभव नहीं है, जिस तरह से select तत्व ओएस द्वारा जेनरेट किए जाते हैं जिस पर ब्राउज़र चलता है, बल्कि ब्राउज़र से ही।

Answer 2

एक ही समस्या का सामना करना पड़ा।

<select id="select-1"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
</select> 
<label for="select-1"></label> 

#select-1 { 
    ... 
} 

#select-1 + label:after { 
    ... 
} 

Answer 3

इस पोस्ट http://bavotasan.com/2011/style-select-box-using-only-css/

वह इस समस्या को हल करने के लिए एक वर्ग के साथ एक बाहर div उपयोग कर रहा है मदद मिल सकती है: शायद यह एक समाधान हो सकता है।

<div class="styled-select"> 
    <select> 
    <option>Here is the first option</option> 
    <option>The second option</option> 
    </select> 
</div> 

Answer 4

मैं एक ही बात के लिए देख रहा था के बाद से मेरी चयन की पृष्ठभूमि तीर रंग के समान है। जैसा कि पहले उल्लेख किया गया है, अभी तक किसी भी प्रकार का चयन करना असंभव है: पहले या: किसी चयनित तत्व के बाद। मेरा समाधान एक रैपर तत्व बनाना था जिस पर मैंने निम्नलिखित जोड़ा: कोड से पहले।

.select-wrapper { 
    position: relative; 
} 

.select-wrapper:before { 
    content: '\f0d7'; 
    font-family: FontAwesome; 
    color: #fff; 
    display: inline-block; 
    position: absolute; 
    right: 20px; 
    top: 15px; 
    pointer-events: none; 
} 

और इस में, मेरा

select { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    width: 100%; 
    padding: 10px 20px; 
    background: #000; 
    color: #fff; 
    border: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
} 

select::-ms-expand { 
    display: none; 
} 

मैं अपने नए तीर के लिए FontAwesome.io का इस्तेमाल किया है, लेकिन आप उपयोग कर सकते हैं और जो कुछ भी आप चाहते हैं। जाहिर है यह एक सही समाधान नहीं है, लेकिन आपकी जरूरतों के आधार पर यह पर्याप्त हो सकता है।

Answer 5

यह समाधान sroy से एक के लिए समान है, लेकिन वेब फ़ॉन्ट के बजाय सीएसएस त्रिकोण के साथ:

.select-wrapper { 
 
    position: relative; 
 
    width: 200px; 
 
} 
 
.select-wrapper:after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-top: 6px solid #666; 
 
    position: absolute; 
 
    right: 8px; 
 
    top: 8px; 
 
    pointer-events: none; 
 
} 
 
select { 
 
    background: #eee; 
 
    border: 0 !important; 
 
    border-radius: 0; 
 
    -webkit-appearance:none; 
 
    -moz-appearance:none; 
 
    appearance:none; 
 
    text-indent: 0.01px; 
 
    text-overflow: ""; 
 
    font-size: inherit; 
 
    line-height: inherit; 
 
    width: 100%; 
 
} 
 
select::-ms-expand { 
 
    display: none; 
 
}

<div class="select-wrapper"> 
 
    <select> 
 
    <option value="1">option 1</option> 
 
    <option value="2">option 2</option> 
 
    <option value="3">option 3</option> 
 
    </select> 
 
</div>

Answer 6

यह एक आधुनिक समाधान मैं font-awesome का उपयोग कर पकाया जाता है। ब्रेवटी के लिए विक्रेता एक्सटेंशन छोड़े गए हैं।

एचटीएमएल

<fieldset> 
    <label for="color">Select Color</label> 
    <div class="select-wrapper"> 
     <select id="color"> 
      <option>Red</option> 
      <option>Blue</option> 
      <option>Yellow</option> 
     </select> 
     <i class="fa fa-chevron-down"></i> 
    </div> 
</fieldset> 

एससीएसएस

fieldset { 
    .select-wrapper { 
     position: relative; 

     select { 
      appearance: none; 
      position: relative; 
      z-index: 1; 
      background: transparent; 

      + i { 
       position: absolute; 
       top: 40%; 
       right: 15px; 
      } 
     } 
    } 

अपने चयन तत्व एक परिभाषित पृष्ठभूमि रंग है, तो इस के रूप में इस टुकड़ा अनिवार्य रूप से पीछे शेवरॉन आइकन स्थानों से काम नहीं चलेगा तत्व का चयन करें (अभी भी चयन कार्रवाई शुरू करने के लिए आइकन के शीर्ष पर क्लिक करने की अनुमति देने के लिए)।

हालांकि, आप चुनिंदा तत्व के समान आकार के लिए चयन-रैपर शैली बना सकते हैं और उसी प्रभाव को प्राप्त करने के लिए इसकी पृष्ठभूमि शैली बना सकते हैं।

चेक बाहर एक काम डेमो है कि दोनों एक अंधेरे और प्रकाश थीम का चयन एक नियमित रूप से लेबल का उपयोग कर और बॉक्स एक "प्लेसहोल्डर" लेबल और इस तरह सीमाओं और चौड़ाई के रूप में अन्य शैलियों साफ पर कोड के इस बिट से पता चलता के लिए मेरे CodePen।

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

Answer 7

मेरे अनुभव के लिए यह केवल काम नहीं करता है, जब तक कि आप कुछ 0 रैपर में अपने <select> को लपेटने के इच्छुक नहीं हैं। लेकिन पृष्ठभूमि छवि एसवीजी का उपयोग करने के बजाय आप क्या कर सकते हैं। जैसे

.archive .options select.opt { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    padding-right: 1.25EM; 
    appearance: none; 
    position: relative; 
    background-color: transparent; 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E"); 
    background-repeat: no-repeat; 
    background-size: 1.5EM 1EM; 
    background-position: right center; 
    background-clip: border-box; 
    -moz-background-clip: border-box; 
    -webkit-background-clip: border-box; 
} 

    .archive .options select.opt::-ms-expand { 
     display: none; 
    } 

आईई की वजह से उचित यूआरएल-एन्कोडिंग से सावधान रहें। आपको charset=utf8 (केवल utf8 नहीं) का उपयोग करना चाहिए, एसवीजी विशेषता मानों को सीमित करने के लिए डबल-कोट्स (") का उपयोग न करें, अपने जीवन को सरल बनाने के बजाय apostrophes (') का उपयोग करें। URL-encode s (% 3E)। यदि आपके पास है किसी भी गैर-ASCII वर्णों को मुद्रित करने के लिए जिन्हें आप अपने यूटीएफ -8 प्रतिनिधित्व प्राप्त करना चाहते हैं (उदाहरण के लिए बेबेलैप आपको इसके साथ मदद कर सकता है) और फिर यूआरएल-एन्कोडेड फॉर्म में उस प्रस्तुति को प्रदान करें - उदाहरण के लिए ▾ (U+25BE ब्लैक डाउन-पॉइंटिंग लघु ट्रिपल) यूटीएफ- 8 प्रतिनिधित्व जो %E2%96%BE है जब URL- एनकोडेड \xE2\x96\xBE है।