Menghapus Gaya Latar Belakang pada Menu Dropdown di Chrome dan Safari?

Apakah mungkin membuat latar belakang dan batas menu tarik-turun dalam bentuk transparan di Chrome dan Safari? Kami membuatnya tampak sempurna di Firefox dan IE, tetapi Chrome dan Safari tampaknya ingin menggunakan gaya default mereka sendiri. :(

Ini adalah kode yang kami gunakan, url latar belakang untuk div pertama adalah menerapkan panah dropdown kustom kami sendiri:

<div style="margin-top:-15px;background: url(images/select-arrow.gif) no-repeat right; overflow: hidden; font-family:SwankyandMooMoo; color:#565da4; width:352px;">      
<select name="for" id="for" style="background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;">
<option value="ads" style=" background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;">Ads</option>
<option value="other" style=" background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;">Other</option>
</select>
</div>

google-chrome drop-down-menu safari
person Paul    schedule 12.10.2012    source sumber

Jawaban (2)


arrow_upward
1
arrow_downward

EDIT sekarang setelah pertanyaannya diklarifikasi, inilah jsfiddle yang akan melakukan apa yang Anda inginkan.

http://jsfiddle.net/wnGs8/30/

Anda mengatur gambar latar belakang pada pilihan dan menggunakan div pembungkus untuk menyembunyikan panah drop-down yang sebenarnya.

HTML

<div class="dropdown-wrapper">
    <select class="dropdown">
        <option>Test 123</option>
        <option>Test 123</option>
        <option>Test 123</option>
        <option>Test 123</option>
    </select>
</div>

CSS

.dropdown-wrapper {
    position: relative;
    overflow: hidden;
    width: 152px; /* width minus 24 */
}
.dropdown {
    font-size: 24px;
    border: none;
    width: 176px;
    background: url('http://whatsnew.googleapps.com/_/rsrc/1299892144226/choose-release-track/arrow_down_blue24.png') no-repeat;
    background-position: 128px 0px; /* width minus 48 */
}
person Louis Ricci    schedule 12.10.2012
comment
Maksud Anda terapkan latar belakang warisan ke elemen pilihan? Sudah mencobanya dan sepertinya tidak berhasil juga. Silakan lihat lagi postingan asli saya karena saya telah memperbaruinya dengan kode yang kami gunakan. - person Paul; 12.10.2012
comment
@Paul - apa yang baru saja saya posting berfungsi di chrome, ff dan ie8. Menyetel gambar latar belakang pada DIV pembungkus alih-alih SELECT itu sendiri mungkin menyebabkan masalah pada rendering chrome dan safari. - person Louis Ricci; 12.10.2012
comment
Terima kasih atas balasan cepat dan kodenya, tetapi sepertinya itu juga tidak berhasil. Saat memeriksa jsfiddle.net/wnGs8/30 Anda dapat melihat di Chrome dan Safari bahwa masih ada gradien abu-abu digunakan sebagai latar belakang di bawah Hasil. - person Paul; 12.10.2012

arrow_upward
0
arrow_downward

Ya, tanpa melihat kode apa pun membuat sulit menilai jawaban Anda. Sebuah "perbaikan" mungkin menggunakan gambar .png yang 100% buram sebagai latar belakang input. Itu seharusnya bisa digunakan di semua browser modern.

Edit sebagai balasan komentar: Coba gunakan background: transparent; dan border: 0; karena itu adalah sintaks yang benar untuk mencapai apa yang Anda inginkan.

Selain itu, font khusus seharusnya tidak terlalu memengaruhi apa pun. Saya menggunakannya sepanjang waktu.

Terakhir, hal ini mungkin tidak dapat dilakukan dengan standar HTML dan CSS kami saat ini. Inilah pertanyaan stackoverflow lain yang berkaitan dengan pertanyaan Anda.

Cara menata dropdown ‹select› dengan CSS hanya tanpa JavaScript?

person AJStacy    schedule 12.10.2012
comment
Trik png sepertinya tidak berfungsi, saya telah memperbarui postingan asli saya sehingga Anda dapat melihat kode yang kami gunakan. Ini sedikit unik karena kami menggunakan font khusus dan juga menggunakan gambar latar belakang div utama untuk mengganti panah dropdown default. - person Paul; 12.10.2012