page - tag a html size




seleziona l'opzione font-size (2)

Ho costruito questo violino come esempio di ciò che sto facendo.

Quello che sto cercando di fare funziona bene in Firefox. Con la dimensione del font di 14px quando apri le opzioni di selezione.

Tuttavia, guardandolo in Google Chrome prende la dimensione del carattere ereditato di 34px .

Sto idealmente cercando le opzioni di selezione per essere la dimensione del carattere 14px .

È possibile farlo?

Sono disposto a fare tutte le correzioni pertinenti in jQuery qualora fossero richieste.

Grazie

Codice elencato di seguito ......

Il mio CSS è:

.styled-select {
    overflow: hidden;
    height: 74px;
    float: left;
    width: 365px;
    margin-right: 10px;
    background: url(http://i50.tinypic.com/9ldb8j.png) no-repeat right center #5c5c5c;
}

.styled-select select {
    font-size: 34px;
    border-radius: 0;
    border: none;
    background: transparent;
    width: 380px;
    overflow: hidden;
    padding-top: 15px;
    height: 70px;
    text-indent: 10px;
    color: #ffffff;
    -webkit-appearance: none;
}

.styled-select option.service-small {
    font-size: 14px;
    padding: 5px;
    background: #5c5c5c;
}

Markup HTML :

<div class="styled-select">
    <select class="service-area" name="service-area">
        <option selected="selected" class="service-small">Service area?</option>
        <option class="service-small">Volunteering</option>
        <option class="service-small">Partnership &amp; Support</option>
        <option class="service-small">Business Services</option>
    </select>
</div>

Come la maggior parte dei controlli di form in HTML, i risultati dell'applicazione di CSS agli elementi <select> e <option> variano molto tra i browser. Chrome, come hai scoperto, non ti consente di applicare direttamente gli stili di font e font ad un elemento <option> --- se controlli Insp Element, vedrai le font-size: 14px del font-size: 14px dichiarazione font-size: 14px è attraversata come se è stato scavalcato dalla cascata, ma in realtà è perché Chrome lo sta ignorando.

Tuttavia, Chrome ti consente di applicare stili di carattere <optgroup> , in modo da ottenere il risultato desiderato, puoi racchiudere tutte le <option> in un <optgroup> e quindi applicare gli stili di carattere a un .styled-select optgroup selettore. Se vuoi optare per l'etichetta opzionale sans-label, potresti dover fare un po 'di CSS intelligente con posizionamento o qualcosa per nascondere l'area bianca in alto dove verrà mostrata l'etichetta, ma ciò dovrebbe essere possibile.

Forgiato a un nuovo JSFiddle per mostrarti cosa intendo:

http://jsfiddle.net/zRtbZ/


Una soluzione potrebbe essere quella di racchiudere le opzioni all'interno di optgroup :

HTML:

<optgroup>
  <option selected="selected" class="service-small">Service area?</option>
  <option class="service-small">Volunteering</option>
  <option class="service-small">Partnership &amp; Support</option>
  <option class="service-small">Business Services</option>
</optgroup>

CSS:

optgroup { font-size:14px; }




css