html раскрывающийся список <select>в Opera отсутствует заполнение - PullRequest
Новая
       0

html раскрывающийся список <select>в Opera отсутствует заполнение

0 голосов
/ 26 сентября 2011

На IE9, Firefox и Chrome мои выпадающие списки выглядят великолепно. Но в Opera отсутствуют 2-3 пикселя отступа, и у меня есть несколько форм с односимвольными записями в этих меню, и это выглядит плохо.

Пробел с обеих сторон будет выглядеть хорошо, но он будет выглядеть плохо в остальных браузерах, а также испортит мои скрипты.

Ответы [ 3 ]

2 голосов
/ 26 сентября 2011

Трудно сказать без кода.

Однако вы можете использовать jQuery для таргетинга только на Opera: 

if($.browser.opera){
    $('select').css(//DO WHATEVER);
}

Это оставит другие браузеры без изменений.

Fwiw ... Я бы проверил статистику вашего посетителя. Использование Opera может быть настолько низким / несуществующим, что исправления могут оказаться ненужными.

0 голосов
/ 31 октября 2011

Спасибо за демо. Добавление определенных стилей в SELECT имеет побочные эффекты, похоже на ошибку макета. Как насчет добавления что-то вроде этого: 

    width: 2em;
    text-align:center;

? Я не тестировал его в других браузерах, но он должен просто «усилить» их рендеринг по умолчанию, я думаю ..

0 голосов
/ 27 сентября 2011

Я только что создал это для обнаружения устройств iOS: 

138     (function () {
139         // ios detection (select menus are ugly)
140         if (navigator.userAgent.toLowerCase().search('iphone') != -1 || navigator.userAgent.toLo    werCase().search('ipod') != -1 || navigator.userAgent.toLowerCase().search('ipad') != -1 ) {
141             // set css rule for input
142             var style = document.createElement('style');
143             style.setAttribute('type','text/css');
144             style.innerHTML = 'select{ color: #333; }'; // custom css for select on ios
145             document.getElementsByTagName('head')[0].appendChild(style);
146         }
147     })();

Я считаю, что мог бы сделать то же самое для Opera.

Что касается исходной проблемы, я создал новый сайт для проверки проблемы: 

1  <head><style type='text/css'>
2  select {
3     background-color: #353535;
4     border: 2px solid #555555;
5     color: #c0c0c0;
6  }
7  </style></head><body>
8  <select>
9     <option>0</option>
10 </select></body>

Что происходит, когда я устанавливаю стили, которые изменяют границу ИЛИ фоновый цвет для выбора, он меняется от аккуратно выглядящего стиля выпадающего меню до старомодно выглядящей квадратной кнопки, а также избавляется от некоторого заполнения.Однако никто не использует Opera, так что я, вероятно, никогда не смогу решить проблему.

...