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

Question

सफ़ारी में मैक और आईओएस डिवाइस पर, <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;
}

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

Answer 1

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

-webkit-appearance:none;

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

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

Comments

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

— Sandeep

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

— मार्क

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

— डोरियन

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

— alicjasalamon

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

— फेलिस सदरलैंड

Answer 2

उपयोग करने -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>

Comments

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

— इंगो रेनर

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

— mga

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

— iSWORD

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

— एंड्रियास गैसमैन

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

— ब्रेट

Answer 3

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

Comments

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

— Noel Abrahams

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

— Iggy

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

— evolross

Answer 4

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

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

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

Comments

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

— नाथन बसानी

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

— जस्टिन एडवर्ड्स

Answer 5

बाहर की जाँच करें -webkit- उपस्थिति: कोई नहीं और इसके डेरिवेटिव। मूल रूप से क्रिस कॉयर द्वारा यहां वर्णित: https://css-tricks.com/almanac/properties/a/appearion/

Answer 6

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

-webkit-appearance:none;

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

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

Answer 7

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

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

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

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

Comments

वह रूपरेखा के बारे में नहीं पूछ रहा है, लेकिन चमकदार पृष्ठभूमि।

— अपोलो