Wählen Sie die Option Polsterung, die in Chrom nicht funktioniert

Wählen Sie die Option Polsterung, die in Chrom nicht funktioniert

<style>
select option { padding:5px 0px; }
</style>    
<select>
<option>1</option>
<option>2</option>
<option>3</option> 
</select>

Ich habe gerade einen Weg gefunden, die Polsterung auf den Auswahleingang anzuwenden

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

Scheint in der aktuellen Chrome 39.0.2171.71 (64-Bit) und Safari (ich habe dies nur auf einem Mac getestet) zu funktionieren.

Dies scheint das Standard-Styling zu entfernen, das der Auswahleingabe hinzugefügt wurde (es hat auch den Dropdown-Pfeil entfernt), aber Sie können dann Ihr eigenes Styling verwenden, ohne dass Chrom es überschreibt.

Ich bin auf dieses Update gestoßen, als ich Code von hier verwendet habe: http://fettblog.eu/style-select-elements/

Dieser einfache Hack wird den Text einrücken. Funktioniert gut.

select {
  text-indent: 5px;
}

Es scheint, dass

Leider unterstützen Webkit-Browser das Styling von Options-Tags noch nicht.

Möglicherweise finden Sie hier eine ähnliche Frage

1. Wie wird das Optionselement eines ausgewählten Tags formatiert?
2. Der Wert der Styling-Option in Dropdown-HTML-Auswahl funktioniert unter Chrome & Safari nicht

Die am weitesten verbreitete browserübergreifende Lösung ist die Verwendung von ul li

Ich hoffe es hilft!

Ich habe es damit behoben

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

Sehr, sehr einfache Idee, aber Sie können sie entsprechend ändern. Dies ist nicht so eingerichtet, dass es gut aussieht, sondern nur, um die Idee zu liefern. Ich hoffe es hilft.

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>

Skript:

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

DEMO

Das funktioniert bei der optionEingabe nicht, da es sich um ein vom System generiertes Dropdown-Menü handelt, aber Sie können die paddingAuswahl auswählen.

Setzen Sie die box-sizingEigenschaft einfach content-boxin Ihrem CSS auf zurück.

Der Standardwert von selectist border-box.

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

Ich habe einen kleinen Trick für dein Problem. Dafür müssen Sie jedoch Javascript verwenden. Wenn Sie festgestellt haben, dass der Browser Chrome ist, fügen Sie zwischen allen Optionen " Dummy " -Optionen ein. Geben Sie eine neue Klasse für diese " Dummy " -Optionen an und deaktivieren Sie sie. Die Höhe der " Dummy " -Optionen, die Sie mit der Eigenschaft " Schriftgröße " definieren können .

CSS:

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

Skript:

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

Keine JQuery - Keine JS-Datei eines Drittanbieters

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>

Smart Code - Verwenden Sie jquery

Bei font-sizeBedarf können Sie die Eigenschaft als Option verwenden.

Stellen Sie einfach die Höhe des ausgewählten Tags ein

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

Sie sollten auf die Auswahl für Ihr CSS anstatt auf die Auswahloption abzielen.

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

Diesen Artikel anzeigen Styling Select Box mit CSS3 für weitere Styling-Optionen.