Удаление стиля фона в раскрывающемся меню в Chrome и Safari?

Можно ли сделать фон и границу выпадающего меню в форме прозрачными в Chrome и Safari? У нас он отлично выглядит в Firefox и IE, но Chrome и Safari, похоже, стремятся использовать свой собственный стиль по умолчанию. :(

Это код, который мы используем, фоновый URL-адрес для первого div должен применить нашу собственную пользовательскую стрелку раскрывающегося списка:

<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 источник

Ответы (2)


arrow_upward
1
arrow_downward

ИЗМЕНИТЬ теперь, когда вопрос прояснен, вот 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 */
}
person Louis Ricci    schedule 12.10.2012
comment
Вы говорите применить наследуемый фон к выбранному элементу? Пробовал и так тоже не работает. Пожалуйста, посмотрите мой исходный пост еще раз, так как я обновил его кодом, который мы используем. - person Paul; 12.10.2012
comment
@Paul - то, что я только что опубликовал, работает в chrome, ff и ie8. Установка фонового изображения в обертке DIV вместо самого SELECT, вероятно, вызывала проблемы с рендерингом Chrome и Safari. - person Louis Ricci; 12.10.2012
comment
Спасибо за быстрый ответ и код, но это тоже не работает. При проверке jsfiddle.net/wnGs8/30 вы можете увидеть как в Chrome, так и в Safari, что все еще есть серый градиент используется в качестве фона в разделе «Результат». - person Paul; 12.10.2012

arrow_upward
0
arrow_downward

Ну, не видя никакого кода, трудно судить о вашем ответе. «Исправление» может заключаться в использовании изображения .png, которое на 100% непрозрачно, в качестве фона для входных данных. Это должно работать во всех современных браузерах.

Изменить в ответ на комментарий: попробуйте использовать background: transparent; и border: 0;, так как это правильный синтаксис для достижения того, чего вы хотите.

Кроме того, пользовательские шрифты не должны ни на что влиять. Я использую их все время.

Наконец, это может быть даже невозможно с нашими текущими стандартами HTML и CSS. Вот еще один вопрос о стеке, относящийся к вашему.

Как оформить раскрывающийся список ‹select› с помощью CSS только без JavaScript?

person AJStacy    schedule 12.10.2012
comment
Трюк с png, похоже, не работает, я обновил свой исходный пост, чтобы вы могли видеть код, который мы используем. Это немного уникально, так как мы используем пользовательские шрифты, а также используем фоновое изображение основного блока, чтобы переопределить стрелку раскрывающегося списка по умолчанию. - person Paul; 12.10.2012