Bagaimana cara menghapus kilap pada elemen tertentu di Safari di Mac?

112

Di perangkat Mac dan iOS, di Safari, <select>elemen dengan warna latar menghasilkan kilap itu sendiri. Ini sepertinya tidak terjadi di sistem operasi lain.

Misalnya, saya memiliki elemen pilih dengan properti gaya ini:

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

Dan elemen saya memiliki warna latar belakang yang saya inginkan, tetapi kilapnya masih ada. Adakah yang tahu bagaimana membuatnya menjadi warna datar?

css  macos  safari  drop-down-menu  background-color 
— Ian Hunter
sumber

Jawaban:

194

@beanland; Anda harus menulis

-webkit-appearance:none;

di css Anda.

baca http://trentwalton.com/2010/07/14/css-webkit-appearance/ ini

— sandeep
sumber
4
tidak perlu terima kasih karena ada banyak hal yang saya tidak tahu :)
— sandeep
123
Apakah ada cara agar panah tetap di sisi kanan? Saya hanya ingin mengganti warnanya. Terima kasih
— Marc
19
@sandeep: Dan untuk membuatnya lintas browser:-moz-appearance: none; -webkit-appearance: none; appearance: none;
— Dorian
6
@Marc Jika setelah 3 tahun Anda masih tertarik .. Saya menambahkan solusi yang saya temukan untuk membuat panah terlihat.
— alicjasalamon
2
Solusi untuk IE adalah dengan menggunakan select :: - ms-expand {display: none; } untuk menyembunyikan ikon tarik-turun kotak pilih IE asli, kemudian gunakan gambar png yang sebenarnya sebagai latar belakang ikon baru. Masalah terjadi karena gambar SVG tidak selalu ditempatkan dengan benar melalui CSS di IE.
— Phyllis Sutherland
106

Menggunakan juga -webkit-appearance:none;akan menghapus panah yang menunjukkan bahwa ini adalah dropdown.

Lihat cuplikan ini yang membuatnya berfungsi di berbagai browser dan menambahkan panah khusus tanpa menyertakan file gambar apa pun:

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>
Luaskan cuplikan

— alicjasalamon.dll
sumber
16
manis, hargai panahnya! inilah versi dengan latar belakang transparan: pilih {background: url (data: image / svg + xml; base64, PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU + LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM + PHRpdGxlPmFycm93czwvdGl0bGU + PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4 =) no-repeat 95% 50%; }
— Ingo Renner
1
membuat panah transparan (tidak dapat menempel di sini karena panjangnya): pastebin.com/HQ0x4Rka
— mga
5
Jika Anda memiliki elemen pemilihan yang luas, ini akan terlihat agak aneh. Untuk memperbaikinya, Anda dapat menggunakan offset tepi posisi latar belakang CSS3 untuk menyelaraskan latar belakang dengan lebih baik. Jadi ganti no-repeat 95% 50%denganno-repeat right 2px center
— iSWORD
3
Anak panah yang sama tetapi berwarna putih dan transparan pastebin.com/07iS41b5
— Andreas Gassmann
2
Saya perhatikan panah yang ditambahkan menyertakan panah atas / bawah - perbaikan cepat apa saja hanya untuk menampilkan panah bawah biasa?
— Brett
14

Versi 2019

URL gambar sebaris yang lebih pendek, hanya menampilkan panah bawah, warna panah yang dapat disesuaikan ...

Dari https://codepen.io/jonmircha/pen/PEvqPa

Penulis mungkin Jonathan MirCha

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;
}
— Noel Abrahams
sumber
1
The background-colorproperti berlaku untuk latar belakang elemen pilih. Untuk mengubah warna panah bawah, Anda perlu mengubah properti isian SVG di URL, misalnyafill='%23fc0000'
— Noel Abrahams
Lebih baik menggunakan background-position tanpa calc: background-position: right .8em top 60%; dan beberapa kursor: diperlukan
— Iggy
Apakah ada versi panah ganda yang dapat ditunjukkan seseorang?
— evolross
3

Maaf menumpuk ke item lama. Saya menemukan jawaban parsial untuk pertanyaan saya di sini tetapi harus melakukan beberapa pekerjaan jadi saya ingin membagikan hasil saya untuk orang berikutnya.

Saya akhirnya menggunakan pendekatan yang sama dengan kontributor lainnya, tetapi dengan beberapa penyesuaian untuk memperbaiki hal berikut

  1. Teks panjang menutupi panah di solusi lain
  2. Gambar yang digunakan adalah panah kombo atas / bawah yang agak tua dan jelek.

Di bawah ini akan memberi Anda solusi yang berfungsi dengan masalah di atas diperbaiki. Catatan: Saya menggunakan panah putih untuk kasus penggunaan saya, Anda mungkin perlu mengubah warna panah untuk Anda.

berikut pratinjau:

pilih dengan panah putih

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;
}
— Justin Edwards
sumber
//, Maukah Anda menjelaskan bagaimana dan mengapa hal itu menghilangkan kilau?
— Nathan Basanese
1
Solusinya pada dasarnya memiliki dua komponen: 1. Minta agar browser tidak melakukan gaya / tampilan apa pun pada elemen. 2. Berikan gaya yang wajar. Di browser yang tidak terlalu buruk (baca, bukan safari) browser menyediakan elemen gaya yang bagus. Dalam safari bagaimanapun browser memberikan gaya yang menjijikkan dan mengerikan. Akibatnya kita harus menimpa tampilan browser yang disediakan di setiap browser. Garis yang diakhiri dengan tampilan: tidak ada yang melakukan bagian 1 dari atas. Garis lainnya menangani bagian 2. Apakah itu membantu?
— Justin Edwards
0

Seperti yang disebutkan beberapa kali di sini

-webkit-appearance:none;

juga menghilangkan tanda panah, yang biasanya tidak Anda inginkan.

Solusi mudah yang saya temukan adalah dengan menggunakan select2 daripada memilih. Anda juga dapat menata ulang elemen select2, dan yang terpenting, select2 terlihat sama di Windows, Android, iOS, dan Mac.

— CharlesT
sumber
-8

Jika Anda memeriksa StyleSheet Agen Pengguna Chome, Anda akan menemukan ini

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

singkatnya properti garis besarnya - buatlah menjadi Tidak Ada

yang seharusnya menghilangkan cahaya

— Surajnaikin
sumber
8
Ia tidak menanyakan tentang garis besarnya, melainkan latar belakang yang mengkilap.
— Apollo
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.