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

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/

Answer 2

पढ़ आप उपयोगकर्ता Chome के एजेंट स्टाइल शीट का निरीक्षण किया, तो आप इस

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

संक्षेप में

इसकी रूपरेखा संपत्ति मिल जाएगा - यह कोई नहीं

कि निकाल देना चाहिए बनाने चमक

Answer 3

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

Answer 4

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

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

select{ 
 
\t background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%; 
 
\t -moz-appearance: none; 
 
\t -webkit-appearance: none; 
 
\t appearance: none; 
 
    /* and then whatever styles you want*/ 
 
\t height: 30px; 
 
\t width: 100px; 
 
\t padding: 5px; 
 
}

<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select>