Выберите опцию, не работающую на хромированном

Ответ 1

Я просто нашел способ получить дополнение, применяемое к входу select в chrome

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px;
}

Кажется, работает в текущем chrome 39.0.2171.71 (64-битный) и сафари (я тестировал это только на Mac).

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

Я наткнулся на это исправление, используя здесь код: http://fettblog.eu/style-select-elements/

Ответ 2

Этот простой взлом сделает отступ в тексте. Работает хорошо.

select {
  text-indent: 5px;
}

Ответ 3

Кажется, что

К сожалению, браузеры webkit еще не поддерживают стиль тегов параметров.

вы можете найти аналогичный вопрос здесь

• Как стилизовать элемент опции select tag?
• Значение параметра Styling в списке drop down html не работает в Chrome и Safari

Наиболее широко используемым кросс-браузерным решением является использование ul li

Надеюсь, что это поможет!

Ответ 4

Это не работает в записи option, потому что это раскрывающееся меню с "системой", но вы можете установить padding для выбора.

Просто reset свойство box-sizing в content-box в вашем CSS.

Значение по умолчанию select равно border-box.

select {
 box-sizing: content-box;
 padding: 5px 0;
}

Ответ 5

Очень, ОЧЕНЬ простая идея, но вы можете ее соответствующим образом изменить. Это не настроено, чтобы выглядеть хорошо, только для того, чтобы обеспечить идею. Надеюсь, что это поможет.

CSS

ul {
    width: 50px;
    height: 20px;
    border: 1px solid black;
    display: block;

}

li {
    padding: 5px 0px;
    width: 50px;
    display: none;

}

HTML:

<ul id="customComboBox">
&nbsp
    <li>Test</li>
    <li>Test 2</li>
    <li>Test 3</li>
</ul>

Script:

$(document).ready(function(){
    $("#customComboBox").click(function(){
        $("li").toggle("slow");
    });
});

DEMO

Ответ 6

Я исправил это

select {
    max-height: calc(1.2em + 24px);
    height: calc(1.2em + 24px);
}


max-height: calc(your line height + (top + bottom padding));
height: calc(your line height + (top + bottom padding));

Ответ 7

У меня есть маленькая хитрость для вашей проблемы. Но для этого вы должны использовать JavaScript. Если вы обнаружили, что браузер Chrome, вставьте "фиктивные" параметры между всеми параметрами. Дайте новый класс для этих "фиктивных" опций и отключите их. Высоту "фиктивных" опций вы можете определить с помощью свойства font-size.

CSS:

option.dummy-option-for-chrome {
  font-size:2px;
  color:transparent;
}

Автор сценария:

function prepareHtml5Selects() {

  var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
  if(!is_chrome) return;

  $('select > option').each(function() {
    $('<option class="dummy-option-for-chrome" disabled></option>')
     .insertBefore($(this));
  });
  $('<option class="dummy-option-for-chrome" disabled></option>')
    .insertAfter($('select > option:last-child'));
}

Ответ 8

Вы можете использовать свойство font-size для параметра, если вам нужно.

Ответ 9

Просто установите высоту выбранного тега

select{
    height: 30px;
    max-height: 30px;
}

Ответ 10

Вы должны настроить таргетинг на свой CSS вместо опции выбора.

select { 
padding: 10px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

Просмотр статьи Styling Select Box с CSS3 для более подробных настроек стиля.