Как сделать так, чтобы выбранные входы выглядели одинаково во всех браузерах на всех платформах?

Question

Я решаю проблему, чтобы выбранные входы выглядели одинаково во всех браузерах (Chrome и Safari на Mac отображают их по-разному), как это сделать?

Answer 1

Способ ONLY , чтобы заставить их выглядеть одинаково прямо сейчас, состоял бы в том, чтобы скрыть исходные входные данные и заменить их соответствующим образом стилизованными html-эквивалентами (бого-запретных объектов Flash), которые действовали бы в качестве прокси,передача функциональности скрытым вводам.

Это может быть автоматизировано с помощью JavaScript.Но это было бы НЕПРАВИЛЬНО .Вы не должны заставлять по-другому смотреть на элементы веб-страницы в стиле ОС.Это противоречит многим методам юзабилити и доступности.

Таким образом, единственный способ - сделать ваш дизайн достаточно гибким, чтобы поддерживать по-разному выглядящие элементы управления на веб-странице, а также использовать разные наборы стилей для разных браузеров, чтобыоблегчить настройку стилей (на данный момент нет входов, которые выглядели бы и действовали одинаково во всех браузерах с одинаковыми правилами стиля).

Answer 2

если вы не возражаете против использования js, вы можете просто создать свой собственный внешний вид (jpg img это может быть тот же самый img, что и оригинальный элемент select, или, если вы хотите смоделировать его части в css), тогда поместите div наВ верхней части этого изображения этот div будет содержать текст, в котором элемент select обычно будет содержать

<div id="selectTxt" >

, а затем установите еще один div с элементом select внутри него.

<div id="transparentSelect" class="transparent"> 
<select id="selectCar" name="selectCar">
      <option>Volvo</option>
      <option>Saab</option>
      <option>Mercedes</option>
      <option>Audi</option>
    </select>  
</div>

Теперьхитрость заключается в том, чтобы установить непрозрачность элемента select на ноль, вы можете сделать это, добавив, добавив прозрачный класс, а затем применив класс к div

.transparent
{
   filter:alpha(opacity=0); 
   -moz-opacity: 0; 
   opacity: 0; 
}

, теперь элемент скрыт, но когда вы нажимаете на негосписок все равно будет отображаться.Таким образом, список всегда будет выглядеть как список по умолчанию в браузере

, теперь используйте js для извлечения значения select каждый раз, когда вы нажимаете на select, и устанавливаете внутренний html для selectTxt div в его значение.Таким образом, вы получаете текст выделенного элемента поверх изображения, которое вы хотите

. Вы можете сделать изображение анимированным с помощью эффекта наведения мыши в css или js

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

http://jsfiddle.net/fiddlerOnDaRoof/LM73V/

в ней также отсутствует изображение стрелки, но вы можете распечатать экран, который из вашего браузера

удачи

Answer 3

К сожалению, жизнь просто отстой в этом. Просто подождите, пока вам не нужно стилизовать ввод файла ... теперь это забавно!

Answer 4

Вы должны применить CSS для сброса стилей (не только для входных данных, это настоятельно рекомендуется для всех элементов, чтобы ваша страница выглядела почти одинаково во всех браузерах), есть много, только Google немного, дляпример этот , а затем примените желаемые стили (цвет и ширина рамки, фон и т. д.), посмотрите этот урок о том, как стилизовать элементы формы