Seleziona l’opzione padding non funzionante in chrome

Seleziona l’opzione padding non funzionante in chrome

 select option { padding:5px 0px; }   1 2 3  

Ho appena trovato un modo per ottenere il padding applicato all’ingresso di selezione in chrome

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

Sembra funzionare nell’attuale chrome 39.0.2171.71 (64-bit) e safari (l’ho provato solo su un Mac).

Questo sembra rimuovere lo stile predefinito aggiunto all’ingresso di selezione (rimuove anche la freccia rivolta verso il basso), ma consente di utilizzare il proprio stile senza che il chrome lo sovrascriva.

Mi sono imbattuto in questa correzione durante l’utilizzo del codice da qui: http://fettblog.eu/style-select-elements/

Questo semplice trucco farà rientrare il testo. Funziona bene.

 select { text-indent: 5px; } 

Sembra che

Sfortunatamente, i browser webkit non supportano ancora lo stile dei tag di opzione.

puoi trovare una domanda simile qui

  1. Come stile l’elemento opzione di un tag selezionato?
  2. Il valore dell’opzione di styling in select drop down html non funziona su Chrome e Safari

La soluzione cross browser più utilizzata è quella di utilizzare ul li

Spero che sia d’aiuto!

Questo non funziona sulla voce di option perché è un menu a discesa generato dal “sistema” ma puoi impostare il padding di una selezione.

Basta ripristinare la proprietà di box-sizing della box-sizing nella box-sizing di content-box nel CSS.

Il valore predefinito di select è border-box .

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

Un’idea molto, MOLTO semplice, ma puoi modificarla di conseguenza. Questo non è impostato per guardare bene, solo per fornire l’idea. Spero che sia d’aiuto.

CSS:

 ul { width: 50px; height: 20px; border: 1px solid black; display: block; } li { padding: 5px 0px; width: 50px; display: none; } 

HTML:

 
    &nbsp
  • Test
  • Test 2
  • Test 3

script:

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

DEMO

L’ho risolto con questo

 select { max-height: calc(1.2em + 24px); height: calc(1.2em + 24px); } max-height: calc(your line height + top/bottom padding); 

Se necessario, puoi utilizzare font-size proprietà font-size per l’opzione.

Ho un piccolo trucco per il tuo problema. Ma per quello devi usare javascript. Se hai rilevato che il browser è Chrome, inserisci le opzioni ” fittizie ” tra tutte le opzioni. Dare una nuova class per quelle opzioni ” fittizie ” e renderle disabilitate. L’altezza delle opzioni ” fittizie ” che puoi definire con la proprietà font-size .

CSS:

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

script:

 function prepareHtml5Selects() { var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() ); if(!is_chrome) return; $('select > option').each(function() { $('') .insertBefore($(this)); }); $('') .insertAfter($('select > option:last-child')); } 

Dovresti selezionare il targeting per il tuo CSS anziché selezionare l’opzione.

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

Visualizza questo articolo Styling Select Box con CSS3 per ulteriori opzioni di styling.