1

ChromeとSafariでドロップダウンメニューの背景と境界線を透明な形にすることはできますか？FirefoxとIEで完璧に見えますが、ChromeとSafariは独自のデフォルトスタイルを使用したいと考えているようです。:(

これは私たちが使用しているコードです。最初のdivの背景URLは、独自のカスタムドロップダウン矢印を適用することです。

<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>
4

2 に答える 2

1

質問が明確になったので編集してください。これは、あなたが望むことを行うjsfiddleです。

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

選択時に背景画像を設定し、ラッパー div を使用して実際のドロップダウン矢印を非表示にします。

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 */
}
于 2012-10-12T18:10:53.103 に答える
0

まあ、コードを見ないと、あなたの答えを判断するのが難しくなります. 「修正」は、入力の背景として 100% 不透明な .png 画像を使用することです。これは、最新のすべてのブラウザーで機能するはずです。

コメントへの返信で編集: and を使用background: transparent;してみてくださいborder: 0;。これは、目的を達成するための正しい構文です。

また、カスタム フォントは実際には何にも影響を与えるべきではありません。私はいつもそれらを使用しています。

最後に、現在の HTML および CSS 標準では不可能な場合もあります。これは、あなたに関連する別のスタックオーバーフローの質問です。

JavaScriptなしでCSSのみで<select>ドロップダウンをスタイルする方法は?

于 2012-10-12T18:05:37.287 に答える