WebKit में CSS के बाद <select> और: के साथ समस्या

Question

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

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

और यह काम नहीं करता है। मुझे पता नहीं क्यों और मुझे W3C चश्मा में जवाब नहीं मिला। यहाँ सीएसएस है:

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

तो क्या यह सामान्य है या कोई चाल है?

Comments

मुझे लगता है कि यह संभव नहीं होना चाहिए , अन्यथा यह रूपों की सामग्री को बदलना बहुत आसान बना देगा। सीएसएस की एक साधारण बिट की कल्पना करें कि कुछ के लिए प्रदर्शन मूल्य बदल रहा है। यह वास्तव में की तुलना में सस्ता दिखाया जा सकता है, लोगों को उनकी अपेक्षा से अधिक के लिए कुछ खरीदने में प्रवृत्त करता है। (या निश्चित रूप से, अगर किसी के पास पेज / यूजरस्टीटशीट के सीएसएस तक पहुंच है, तो वे शायद अन्य तरीकों से भी ऐसा कर सकते हैं ...)

— 22

@ साइनिटेक - यह गलत है, पेज के लेखक को पेज स्टाइल के सभी पहलुओं पर पूरा नियंत्रण होना चाहिए। ब्राउज़र निर्माता कुछ तत्वों की स्टाइलिंग को रोकने की कोशिश कर रहे हैं क्योंकि उनका उपयोग उपयोगकर्ताओं को गुमराह करने के लिए किया जा सकता है क्योंकि यह प्रभावी नहीं होगा क्योंकि सिस्टम को धोखा देने या झूठी सकारात्मकता उत्पन्न करने के तरीकों की लगभग असीम संख्या है।

— जोनाथन क्रॉस

छद्म तत्वों और चयनित टैग के

— Tessa

Answer 1

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

Comments

यह अब 2019 है और यह अभी भी वैसा ही है

— प्लासीडो

यह अब 2020 है और यह अभी भी वैसा ही है

— जोएरी मिनेकेर

अगर मैंने एक घंटे पहले इस 10 साल पुरानी पोस्ट पर आपकी टिप्पणी देखी थी, तो मैंने अपने समय का एक घंटा खुद बचाया होगा। : C

— ericek111

Answer 2

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

.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 का उपयोग किया है, लेकिन आप जो चाहें और उपयोग कर सकते हैं। जाहिर है यह एक सही समाधान नहीं है, लेकिन आपकी आवश्यकताओं के आधार पर यह पर्याप्त हो सकता है।

Comments

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

— शोवी

सूचक-घटनाएँ: कोई नहीं; उसका ध्यान रखना चाहिए। मेरे कोड के ऊपर एक समस्या थी। मैं किसी भी भ्रम को दूर करने के लिए किसी भी sass को css में बदल दूंगा।

— 18

क्या वह पदार्थ है जो छद्म चयनकर्ता (बनाम से पहले) का उपयोग किया जाता है?

— Eddiegroves

आप

— sroy

यह एक महान समाधान है लेकिन इसे लागू करते समय मैंने पाया कि किसी कारण से: काम करने से पहले और नहीं: के बाद। मुझे पता नहीं क्यों।

— ली प्रोबर्ट

Answer 3

मेरे अनुभव के अनुसार, यह तब तक काम नहीं करता है, जब तक कि आप अपने <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;
    }

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

Comments

यह एक अच्छा और सुरुचिपूर्ण समाधान है

— जोसफ्रे

यह एक शानदार, सरल और सुरुचिपूर्ण समाधान है जिसके लिए बिना किसी अतिरिक्त HTML की आवश्यकता होती है जो वास्तव में मैं देख रहा था! धन्यवाद! यह चयनित उत्तर IMO होना चाहिए।

— काइलफ़ारिस

Answer 4

यह पोस्ट 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 5

उसी समस्या का सामना किया। संभवतः यह एक समाधान हो सकता है:

<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 {
    ...
}

Comments

क्या आप चुनिंदा तत्व के ऊपर लेबल को बैठाने के लिए आवश्यक शैलियों में जोड़ सकते हैं?

— bafromca

Answer 6

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

.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 7

क्या होगा अगर मार्कअप को संशोधित करना एक विकल्प नहीं है?

यहां एक समाधान है जिसमें एक आवरण के लिए कोई आवश्यकता नहीं है: यह पृष्ठभूमि-छवि में एक एसवीजी का उपयोग करता है। आपको रंग भरने के तरीके को समझने के लिए HTML इकाई डिकोडर का उपयोग करने की आवश्यकता हो सकती है ।

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;

background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;

सीएसएस-ट्रिक्स से चुटकी ली गई ।

Comments

यह एक अच्छी चाल है। सुपर कष्टप्रद है कि हम अभी भी कर सकते हैं 2020 में नहीं शैली चयन

— ramijames

Answer 8

यह एक आधुनिक समाधान है जिसे मैंने फ़ॉन्ट-कमाल का उपयोग करके पकाया है । संक्षिप्तता एक्सटेंशन को संक्षिप्तता के लिए छोड़ दिया गया है।

एचटीएमएल

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

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

हालाँकि, आप चुनिंदा रैपर को उसी आकार में स्टाइल कर सकते हैं जैसे कि सिलेक्ट एलिमेंट और उसी प्रभाव को प्राप्त करने के लिए इसके बैकग्राउंड को स्टाइल करें।

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

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

Answer 9

<div class="select">
<select name="you_are" id="dropdown" class="selection">
<option value="0" disabled selected>Select</option>
<option value="1">Student</option>
<option value="2">Full-time Job</option>
<option value="2">Part-time Job</option>
<option value="3">Job-Seeker</option>
<option value="4">Nothing Yet</option>
</select>
</div>

आप एक div बाहर की ओर जोड़ने का चयन क्यों न स्टाइल का चयन करने के लिए प्रेरित किया।

और फिर CSS में स्टाइल

.select{
    width: 100%;
    height: 45px;
    position: relative;
}
.select::after{
    content: '\f0d7';
    position: absolute;
    top: 0px;
    right: 10px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #0b660b;
    font-size: 45px;
    z-index: 2;

}
#dropdown{
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
            height: 45px;
            width: 100%;
        outline: none;
        border: none;
        border-bottom: 2px solid #0b660b;
        font-size: 20px;
        background-color: #0b660b23;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
}