मैं मैक पर सफारी में एक चुनिंदा तत्व पर चमक कैसे निकाल सकता हूं?


112

सफ़ारी में मैक और आईओएस डिवाइस पर, <select>बैकग्राउंड कलर वाला एक तत्व अपने आप में एक चमक उत्पन्न करता है। अन्य ऑपरेटिंग सिस्टम में ऐसा नहीं लगता है।

उदाहरण के लिए, मेरे पास इन शैली गुणों के साथ एक चयनित तत्व है:

select {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 3px 6px;
margin: 10px 0 7px;
width: 250px;
background-color: #BD2786;
color: white;
letter-spacing: -.04em;
font-weight: bold;
border: 0;
}

और मेरे तत्व का पृष्ठभूमि रंग है जो मुझे चाहिए, लेकिन चमक अभी भी है। क्या किसी को पता है कि यह एक सपाट रंग कैसे बना सकता है?

जवाबों:


194

@beanland; आपको लिखना होगा

-webkit-appearance:none;

अपनी सीएसएस में।

इसे पढ़ें http://trentwalton.com/2010/07/14/css-webkit-appearance/


4
धन्यवाद की कोई आवश्यकता नहीं है क्योंकि बहुत सारी चीजें हैं जो मुझे नहीं पता :)
Sandeep

123
क्या तीर को दाईं ओर रखने का कोई तरीका है? मैं केवल रंग को ओवरराइड करना चाहता हूं। साभार
मार्क

19
@ संदीप: और इसे क्रॉस-ब्राउज़र बनाने के लिए:-moz-appearance: none; -webkit-appearance: none; appearance: none;
डोरियन

6
@Marc यदि 3 साल के बाद भी आप रुचि रखते हैं .. मैंने एक समाधान जोड़ा है जो मुझे तीर दिखाने के लिए मिला है।
alicjasalamon

2
IE के लिए समाधान का उपयोग करने के लिए है चयन :: - एमएस-विस्तार {प्रदर्शन: कोई नहीं; } देशी IE चयन बॉक्स ड्रॉपडाउन आइकन को छिपाने के लिए, फिर नए आइकन के लिए पृष्ठभूमि के रूप में एक वास्तविक png छवि का उपयोग करें। समस्या तब होती है क्योंकि SVG इमेज हमेशा IE में CSS के माध्यम से ठीक से पोस्ट नहीं की जाती हैं।
फेलिस सदरलैंड

106

उपयोग करने -webkit-appearance:none;से यह इंगित करने वाला तीर भी निकल जाएगा कि यह ड्रॉपडाउन है।

इस स्निपेट को देखें जो विभिन्न ब्राउज़रों में काम करता है, बिना किसी छवि फ़ाइलों को शामिल किए बिना कस्टम तीर जोड़ता है:

select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    /* and then whatever styles you want*/
	height: 30px; 
	width: 100px;
	padding: 5px;
}
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>


16
मीठा, तीर ठीक करने की सराहना करते हैं! यहाँ पारदर्शी पृष्ठभूमि के साथ एक संस्करण है: चयन {पृष्ठभूमि: यूआरएल (डेटा: image / svg + xml; बेस 64, PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU + LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM + PHRpdGxlPmFycm93czwvdGl0bGU + PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4 =) नहीं दोहराने 95% 50%; }
इंगो रेनर

1
एक पारदर्शी तीर बनाया (लंबाई के कारण यहाँ पेस्ट नहीं किया जा सकता है): pastebin.com/HQ0x4Rka
mga

5
यदि आपके पास व्यापक चयन तत्व हैं, तो यह थोड़ा बंद दिखेगा। इसे ठीक करने के लिए, आप बेहतर पृष्ठभूमि को संरेखित करने के लिए CSS3 के बैकग्राउंड पोजीशन एज ऑफ़सेट का उपयोग कर सकते हैं। तो no-repeat 95% 50%साथ बदलेंno-repeat right 2px center
iSWORD

3
एक ही तीर लेकिन सफेद और पारदर्शी pastebin.com/07iS41b5 में
एंड्रियास गैसमैन

2
मुझे लगता है कि जोड़े गए तीरों में ऊपर / नीचे तीर दोनों शामिल हैं - सामान्य डाउन एरो दिखाने के लिए कोई त्वरित सुधार?
ब्रेट

14

2019 संस्करण

छोटा इनलाइन छवि URL, केवल नीचे तीर, अनुकूलन योग्य तीर रंग दिखाता है ...

से https://codepen.io/jonmircha/pen/PEvqPa

लेखक शायद जोनाथन मिराचे हैं

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-color: #efefef;
}

1
background-colorसंपत्ति का चयन तत्व की पृष्ठभूमि पर लागू होता है। डाउन एरो का रंग बदलने के लिए, आपको URL में SVG फिल प्रॉपर्टी को बदलना होगा, जैसेfill='%23fc0000'
Noel Abrahams

कैल्क के बिना पृष्ठभूमि-स्थिति का उपयोग करने के लिए बेहतर: पृष्ठभूमि-स्थिति: सही .8em शीर्ष 60%; और कुछ कर्सर: जरूरत है
Iggy

क्या कोई ऐसा डबल-एरो संस्करण है जिसे कोई प्रदर्शित कर सकता है?
evolross

3

एक पुरानी वस्तु पर ढेर करने के लिए क्षमा करें। मुझे यहां मेरे सवालों के आंशिक उत्तर मिले लेकिन मुझे कुछ काम करना था इसलिए मैं अपने परिणामों को अगले व्यक्ति के लिए साझा करना चाहता था।

मैंने अन्य योगदानकर्ताओं के समान दृष्टिकोण का उपयोग किया, लेकिन निम्नलिखित को ठीक करने के लिए कुछ ट्वीक्स के साथ

  1. लंबा पाठ अन्य समाधानों में तीरों को कवर कर रहा था
  2. उपयोग की जा रही छवि कुछ पुरानी और बदसूरत अप / डाउन कॉम्बो तीर थी।

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

यहाँ एक पूर्वावलोकन है:

सफेद तीर के साथ चयन करें

select{    
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI+ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=) no-repeat 101% 50%;
  padding-right:20px;
}

//, क्या आप बताएंगे कि ग्लॉस को कैसे और क्यों हटाया जाता है?
नाथन बसानी

1
समाधान में मूल रूप से दो घटक होते हैं: 1. अनुरोध करें कि ब्राउज़र तत्व पर कोई शैली / प्रदर्शन नहीं करता है। 2. एक उचित शैली प्रदान करें। ब्राउज़र में जो भयानक नहीं हैं (पढ़ें, सफारी नहीं) ब्राउज़र प्रदान की गई तत्व शैली अच्छी है। सफारी में हालांकि ब्राउज़र प्रदान करने वाली शैली घृणित और भयानक है। नतीजतन हमें हर ब्राउज़र में दिए गए ब्राउज़र को ओवरराइड करना चाहिए। दिखने में समाप्त होने वाली रेखाएं: ऊपर से कोई भी भाग 1 नहीं करता है। अन्य लाइनें भाग 2 से निपटती हैं। क्या यह मदद करता है?
जस्टिन एडवर्ड्स


0

जैसा कि कई बार यहां बताया गया है

-webkit-appearance:none;

तीर को भी हटा देता है, जो कि आप ज्यादातर मामलों में नहीं चाहते हैं।

एक आसान वर्कअराउंड मैंने पाया है कि सिलेक्ट होने के बजाय सिलेक्ट 2 का उपयोग करें। आप चुनिंदा तत्व को फिर से स्टाइल कर सकते हैं, और सबसे महत्वपूर्ण बात यह है कि, चयन 2 विंडोज, एंड्रॉइड, आईओएस और मैक पर समान दिखता है।


-8

यदि आप चोम के उपयोगकर्ता एजेंट स्टाइलशीट का निरीक्षण करते हैं, तो आपको यह मिल जाएगा

outline: -webkit-focus-ring-color auto 5px;

संक्षेप में इसकी रूपरेखा संपत्ति - इसे कोई नहीं बनाएं

कि चमक को दूर करना चाहिए


8
वह रूपरेखा के बारे में नहीं पूछ रहा है, लेकिन चमकदार पृष्ठभूमि।
अपोलो
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.