Стиль HTML выберите список

Question

Стиль HTML выберите список

0

Получил приятное меню с закругленными кнопками, и я хочу, чтобы стиль выпадающего списка был одинаковым. Пробовал много разных вещей, но есть две вещи, в которых мне нужна помощь:
1. закругленные углы, как и остальные кнопки.
2. Получите сплошной цвет, а не тот анимированный вид.

Вот изображение с кнопками и выпадающим меню:

Вот стиль в списке:

#topNav .right #categoryButton {
     margin-top:5px;
     border:3px solid #fff;
     background-color:#303030 ;
     text-transform:uppercase;
     color: #fff;
     height:50px;
     width:220px;
     outline: none;
}

Christoffer Jacobsen 15 дек. 2013, в 23:58

Источник

0

Возможно, этот вопрос (и его ответ) также является ответом, который вы ищете / надеялись не найти: stackoverflow.com/questions/5689389/styling-html-select-element
Floris 15 дек. 2013, в 23:00
0

Чтобы ответить на этот вопрос хорошо, вы должны знать, какие браузеры поддерживаются.
Jeremy A. West 20 дек. 2013, в 21:34

Теги:

html

css

html5

css3

2 ответа

2

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

Это в основном включает в себя обёртывание select в div и стилизацию div:

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #ddd;
   border: 1px solid #ccc;
   }

<div class="styled-select">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
  </select>
</div>

Paul Redmond 15 дек. 2013, в 22:11

Ещё вопросы

Возможно, этот вопрос (и его ответ) также является ответом, который вы ищете / надеялись не найти: stackoverflow.com/questions/5689389/styling-html-select-element
Чтобы ответить на этот вопрос хорошо, вы должны знать, какие браузеры поддерживаются.

Pedro Moreira · Accepted Answer · 2013-12-15T20-17-00.000Z

Вы не можете сделать это. Вы должны создать свой собственный элемент выбора.

Из этой статьи обсуждается "Что делать, если вы хотите полностью контролировать дизайн?"

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

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

Доступно скрыть оригинальный выбор.

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

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

Есть еще несколько шагов, чтобы приспособить различные настройки клиента и учебник, связанный для получения дополнительной информации.