Выберите вариант заполнения, не работающий в Chrome

Выберите вариант заполнения, не работающий в Chrome

<style>
select option { padding:5px 0px; }
</style>    
<select>
<option>1</option>
<option>2</option>
<option>3</option> 
</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/

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

select {
  text-indent: 5px;
}

Кажется, что

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

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

1. Как стилизовать элемент option тега select?
2. Значение параметра стиля в раскрывающемся списке html не работает в Chrome и Safari

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

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

Я исправил это с помощью этого

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));

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

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>

Сценарий:

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

ДЕМО

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

Просто установите box-sizingсвойство content-boxв свой CSS.

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

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

У меня есть небольшая хитрость для решения твоей проблемы. Но для этого вы должны использовать 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'));
}

Не заполнение, но если ваша цель просто увеличить его, вы можете увеличить font-size. И использование его с font-size-adjustуменьшает размер шрифта до нормального при выборе, а не в параметрах, поэтому в конечном итоге он становится optionбольше.

Не уверен, работает ли он во всех браузерах или будет продолжать работать в текущем состоянии.

Протестировано в Chrome 85 и Firefox 81.

select {
    font-size: 2em;
    font-size-adjust: 0.3;
}

<label>
  Select: <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
</label>

Нет JQuery - Нет стороннего файла js

function clickComboBox(){
  comboOpt = document.getElementsByClassName("opt");
  for (i = 0; i < comboOpt.length; i++) {
      if (comboOpt[i].style.display === "block") {
        comboOpt[i].style.display = "none";
      } else {
        comboOpt[i].style.display = "block";
      }
  }    
}
function clickOpt(value1,text1){
  document.getElementById("selectedValue").value=value1;
  document.getElementById("customComboBox").innerHTML=text1;
  clickComboBox();
}

#customComboBox{
width: 150px;
height: 20px;
border: 1px solid #CCCCCC;
display: block;
padding: 2px 5px;
}
.opt{
padding: 5px 0px;background-color:#CCCCCC;
width: 160px;
display: none;
}

<div id="customComboBox"  onClick="clickComboBox()">
-Select Value-
</div>
<input type="hidden" id="selectedValue">
  <div class="opt">
  <div onClick="clickOpt('01','Test1')"><img  src="https://pasteboard.co/J6940Vs.png" height="20">Test1</div>
  <div style="padding-left:10px;" onClick="clickOpt('02','Test2')">Test2</div>
  <div onClick="clickOpt('03','Test3')">Test3</div>
  </div>

умный код - используйте jquery

Произвольное отступление от любого варианта

Если вы просто хотите сделать отступ для случайных, произвольных <option />элементов, вы можете использовать  , что имеет наибольшую кроссбраузерность среди решений, размещенных здесь ...

.optionGroup {
  font-weight: bold;
  font-style: italic;
}

<select>
    <option class="optionGroup" selected disabled>Choose one</option>
    <option value="sydney" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Sydney</option>
    <option value="melbourne" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Melbourne</option>
    <option value="cromwell" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Cromwell</option>
    <option value="queenstown" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Queenstown</option>
</select>

Упорядоченный отступ параметров

Но если у вас есть отсортированная упорядоченная структура ваших данных, рекомендуется использовать <optgroup/>синтаксис ....

Элемент HTML создает группу параметров внутри элемента. (Источник: MDN Web Docs:<optgroup> )

<select>
    <optgroup label="Australia" default selected>
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
    </optgroup>
    <optgroup label="United Kingdom">
        <option value="london">London</option>
        <option value="glasgow">Glasgow</option>
    </optgroup>
</select>

К сожалению, <optgroup />разрешен только один уровень, который в настоящее время поддерживается браузерами. (Источник: w3.org .) Лично я считаю, что эта часть спецификации нарушена, но вы всегда можете расширить до третьего, четвертого и т. Д. Уровней отступа, используя  описанный выше трюк.

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

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

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

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

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

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