Chrome добавляет вертикальное дополнение для выбора параметров на разных компьютерах

Поскольку это та же ОС и тот же браузер, я бы посмотрел на пользовательские таблицы стилей:

• Windows: \User Data\Default\User StyleSheets\custom.css
• Linux: ~/.config/chromium/Default/User StyleSheets/Custom.css
• (Я знаю, что вы оба работаете в Windows, просто освещая основы для читателей)

В прошлом я бы использовал инспектор элементов для проверки различий после рендеринга страницы. Свойство CSS, которое всегда мешает мне с отступами и т. д., — это box-sizing.

Скотт,

Если это что-то действительно важное, вы можете имитировать поведение выбора с помощью div и иметь лучший контроль. При этом это может быть не заполнение, вы пытались установить margin: 0 для элементов <option>?

.select option {
  padding: 0;
  margin: 0;
} 

Большинство элементов имеют свои собственные отступы/маржи в разных браузерах. Я бы рекомендовал использовать сброс CSS, если вам нужен единый дизайн для всех браузеров (см. используйте/" rel="nofollow">здесь). Также может быть, что у кого-то из вас Chrome увеличен. Вам обоим следует удерживать control и нажимать + или -, чтобы убедиться, что масштаб установлен на 100%.

Редактировать: я думаю, что вы в этом, к сожалению. См. статью Криса Койера Стили раскрывающегося списка по умолчанию, особенно последнюю часть статьи, большую часть который здесь цитируется.

А как насчет самого выпадающего списка?

Например, то, что показывает выбор при активации. Насколько я знаю, ни в одном браузере их нельзя стилизовать. Даже жирным или курсивом. Самое близкое к стилю, которое вы можете получить, — это сгруппировать их с помощью . Это, вероятно, в основном связано с пользовательским интерфейсом, но это также может быть связано с безопасностью. Вы бы не хотели, чтобы люди делали хитрые вещи со шрифтами, из-за которых неясно, какой параметр выбран.

Что делать, если вам нужен полный контроль над дизайном?

Во-первых, постарайтесь сделать все возможное, чтобы в этом не было необходимости. Элементы формы по умолчанию знакомы и хорошо работают. Обычно не требуется, чтобы выпадающее меню соответствовало шрифту и цветам вашего бренда, и, скорее всего, это в лучшем случае неприятно, а в худшем — плохой UX.

Если вы решите, что настроить выпадающий список — это абсолютно хорошая идея, вам следует использовать JavaScript, чтобы:

1. Доступно скрыть исходный выбор.

2. Перестройте выбор с помощью пользовательской разметки (возможно, списка определений), которую вы стилизуете так, как хотите.

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

4. Для мобильных устройств инициируйте открытие собственного меню выбора, потому что эту функциональность практически невозможно воспроизвести. Например, поворотное колесо iOS.

5. Возможно, вы также захотите использовать стиль «переход по клику» для настольных компьютеров. Выберите пользовательский стиль по умолчанию, но когда вы щелкаете по нему, открывается собственное раскрывающееся меню (на месте). Когда вы выбираете параметр, он снова отображает пользовательский стиль с показанным выбором.

Это много работы и легко испортить, так что будьте осторожны.

Джошуа