Виберіть параметр відступ, який не працює в хромі

Виберіть параметр відступ, який не працює в хромі

<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. Як стилізувати елемент опції тегу 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, вставте " фіктивні " параметри між усіма параметрами. Дайте новий клас для цих " фіктивних " опцій та зробіть їх вимкненими. Висоту " фіктивних " параметрів можна визначити за допомогою властивості size-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

Ви можете використовувати font-sizeвластивість для опції, якщо вам потрібно.

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

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

Вам слід націлити вибір на ваш CSS, а не параметр вибору.

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

Перегляньте цю статтю Styling Select Box із CSS3, щоб отримати більше варіантів стилізації.