У меня возникли проблемы с настройкой размера шрифта HTML <select> в OS X Safari и Chrome. В основном атрибут игнорируется, если я не увеличиваю или уменьшаю масштаб, и в этом случае атрибут распознается магическим образом. Кто-нибудь видел то же самое/знает обходной путь? Прекрасно работает с OS X Firefox, что заставляет меня думать, что это проблема Webkit.
HTML выберите размер шрифта
Ответы (2)
Вам нужно будет отключить стили ОС по умолчанию с помощью: -webkit-appearance: none;
(если вы создаете выпадающее меню с строгим стилем, это, по сути, полный сброс стиля).
Вы также можете попробовать: -webkit-appearance: menulist-button;
(Хотя я не уверен, как другие эффекты стиля повлияют на этот.)
person
drudge
schedule
17.03.2011
Исправляет Safari, но не исправляет Chrome!
- person Justin; 18.03.2011
@Justin: Это должно исправить Chrome .. возможно, вы могли бы опубликовать свой код, чтобы мы могли точно видеть, что происходит, а не гадать? Кроме того, эта ссылка объясняет, какие атрибуты CSS поддерживаются.
- person drudge; 18.03.2011
Я врал. Хром исправлен. Потребовалось время, чтобы файл развернулся должным образом. Большое спасибо.
- person Justin; 18.03.2011
Спасибо. Работает идеально.
- person ; 13.01.2014
Я только что столкнулся с этим и нашел лучшее решение, чем -webkit-appearance:none (что выглядит неуклюжим без дополнительного стиля). Вы можете увеличить размер шрифта, сохранив при этом стандартный внешний вид webkit, если установите цвет границы.
select {
font-size:1.2em;
border-color:#999; /* without this, it won't work */
}
Довольно глупо, но, по крайней мере, это работает и в Chrome, и в Safari.
person
wtbgtr
schedule
08.08.2012
Хотелось бы понять мотивы этого.
- person Bill Criswell; 08.02.2013
Если вы не хотите настраивать границу по умолчанию, вы также можете добавить прозрачную тень:
font-size: 18px; -webkit-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent;
- person allicarn; 18.12.2013
Похоже, это может быть любое свойство
border, за исключением свойства border-collapse. Особо маловероятно, что оно будет конфликтовать со стилями страницы, это border-image: 0 или border-image: repeat. При использовании решения invisible-box-shadow его можно сократить до box-shadow: 0. фтр, outline не работает
- person henry; 09.01.2015
Любое изменение свойства, вызывающее перерисовку элемента управления, поможет.
background также будет работать. Интересно, что если вы установите для свойства то же значение, что и таблица стилей пользовательского агента, это не будет иметь никакого эффекта. Дело в том, что браузер фактически должен изменить отображение элемента, который запускает новый рендеринг.
- person Neil Monroe; 07.06.2016
-webkit-appearance: none;- person drudge schedule 18.03.2011