Wybierz dopełnienie opcji nie działa w chrome

Wybierz dopełnienie opcji nie działa w chrome

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

Właśnie znalazłem sposób, aby zastosować dopełnienie do wybranego wejścia w chrome

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

Wydaje się, że działa w obecnym chrome 39.0.2171.71 (64-bit) i safari (testowałem to tylko na Macu).

Wydaje się, że usuwa to domyślną stylizację dodaną do zaznaczonych danych wejściowych (spowodowało to również usunięcie strzałki rozwijanej), ale umożliwia następnie użycie własnego stylu bez nadpisywania go przez chrom.

Natknąłem się na tę poprawkę podczas korzystania z kodu stąd: http://fettblog.eu/style-select-elements/

Ten prosty hack spowoduje wcięcie tekstu. Działa dobrze.

select {
  text-indent: 5px;
}

Wygląda na to że

Niestety, przeglądarki webkit nie obsługują jeszcze stylizacji tagów opcji.

możesz znaleźć podobne pytanie tutaj

1. Jak stylizować element opcji tagu select?
2. Wartość opcji stylizacji w menu rozwijanym wyboru html nie działa w przeglądarce Chrome i Safari

Najczęściej używanym rozwiązaniem dla różnych przeglądarek jest użycie ul li

Mam nadzieję, że to pomoże!

Naprawiłem to tym

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

Bardzo, BARDZO prosty pomysł, ale możesz go odpowiednio zmodyfikować. To nie jest skonfigurowane, aby dobrze wyglądać, tylko po to, aby zapewnić pomysł. Mam nadzieję, że to pomoże.

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>

Scenariusz:

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

PRÓBNY

To nie działa na optionwejściu, ponieważ jest to menu rozwijane wygenerowane przez system, ale możesz ustawić paddingwybór.

Po prostu zresetuj box-sizingwłaściwość do content-boxw swoim CSS.

Wartość domyślna selectto border-box.

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

Mam małą sztuczkę na twój problem. Ale do tego musisz użyć javascript. Jeśli wykryłeś, że przeglądarka to Chrome, wstaw " fikcyjne " opcje między każdą opcją. Daj nową klasę dla tych „ fikcyjnych ” opcji i wyłącz je. Wysokość opcji „ dummy ”, które można zdefiniować za pomocą właściwości font-size .

CSS:

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

Scenariusz:

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

Nie dopełnienie, ale jeśli Twoim celem jest po prostu zwiększenie rozmiaru, możesz zwiększyć font-size. Używanie go z font-size-adjustzmniejsza rozmiar czcionki z powrotem do normalnego przy zaznaczaniu, a nie w opcjach, więc kończy się na optionpowiększaniu.

Nie jestem pewien, czy działa we wszystkich przeglądarkach, czy będzie działać w aktualnej wersji.

Przetestowano na Chrome 85 i 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>

No Jquery - brak pliku js innej firmy

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>

inteligentny kod - użyj jquery

Dowolne wcięcie dowolnej opcji

Jeśli chcesz tylko wciskać losowe, dowolne <option />elementy, możesz użyć  , który ma największą kompatybilność między przeglądarkami z opublikowanych tutaj rozwiązań ...

.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>

Uporządkowane wcięcie opcji

Ale jeśli masz jakąś posortowaną, uporządkowaną strukturę swoich danych, zaleca się użycie <optgroup/>składni ....

Element HTML tworzy grupę opcji w elemencie. (Źródło: 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>

Niestety, tylko jeden <optgroup />poziom jest obecnie dozwolony i obecnie obsługiwany przez przeglądarki. (Źródło: w3.org .) Osobiście uważałbym , że ta część specyfikacji jest zepsuta, ale zawsze można rozszerzyć poziom wcięcia na trzeci, czwarty itd., Używając powyższej  sztuczki.

font-sizeJeśli potrzebujesz, możesz użyć właściwości dla opcji.

Po prostu ustaw wysokość zaznaczonej tagu

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

Powinieneś kierować się na wybór dla swojego arkusza CSS zamiast opcji wyboru.

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

Zobacz ten artykuł Styling Select Box z CSS3 aby uzyskać więcej opcji stylizacji.