Styling a <select> in problemi CSS

Sto utilizzando puro CSS per creare uno stile < selezionare> casella a discesa. Usando il codice qui sotto, sono in grado di farlo con un singhiozzo: quando il testo sull'opzione diventa troppo ampio, non si interrompe prima dell'immagine di sfondo della freccia rivolta verso il basso.Styling a <select> in problemi CSS

Normal View

Quando il testo è troppo lungo:

Text too long

Quello che vorrei realizzare è quello di avere il testo tagliato prima della caduta di immagine freccia verso il basso in modo che non si sovrappongono . Tuttavia, vorrei ancora come il testo completo da visualizzare quando viene ampliato l'elenco a discesa:

Expanded

Ecco il codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Styling Selects</title> 
    <style type="text/css"> 
     .selectDiv select { 
      background: transparent; 
      width: 250px; 
      padding: 7px; 
      font-size: 16px; 
      border: none; 
      height: 34px; 
      text-transform: lowercase; 
      color: #666666; 
      z-index: 100; 
      position: absolute; 
      left: 0px; 
      top: 0px; 
     } 

     .selectDiv { 
      border: 2px solid #666666; 
      display: block; 
      width: 218px; 
      height: 34px; 
      overflow: hidden; 
      position:relative; 
      display: inline-block; 
     } 

     .selectButtonDiv { 
      width: 16px; 
      height: 16px; 
      z-index: 99; 
      position: absolute; 
      left: 190px; 
      top: 9px; 
      display: inline-block; 
      background: url("stream_7B0046.png") no-repeat -96px #FFF; 
     }  
    </style> 
</head> 
<body> 
    <div class="selectDiv"> 
     <div class="selectButtonDiv"></div> 
     <select> 
      <option value="Option 1">Option 1</option> 
      <option value="Option With Really Long Name">Option With Really Long Name</option> 
     </select> 
    </div> 
</body> 
</html>

Tutte le idee su come avrei potuto tagliare il testo quando si visualizza il menu a tendina compresso ma si mostra ancora il testo completo quando espanso. Tutto questo pur rimanendo puramente in CSS. Grazie!

fonte

2012-05-29 John Chapman

Hai provato il riempimento, giusto? –

Padding-Right aggiunge padding alla destra della freccia di selezione a discesa originale, non tra il testo e la freccia. Quindi, non risolve la necessità di nascondere la normale freccia a discesa mentre mostra l'altro. –

Il mio primo suggerimento sarebbe quello di rendere lo select largo abbastanza da tenere conto del numero maggiore di caratteri. Sono sicuro che ci hai pensato e non è disponibile.

La mia seconda raccomandazione è l'aggiunta di Javascript, in particolare jQuery DD, per sostituire lo select options con elenchi di definizioni che possono essere più facilmente abbinati. https://github.com/HenrikJoreteg/jquery.dd

fonte

2012-05-29 19:54:50

Finito utilizzando un plugin jQuery (scelto), quindi JS doveva essere la strada da percorrere. –

@JohnChapman grazie per il suggerimento su Chosen, inizierò sicuramente a usarlo! –

Metti la selezione in un div interno e usa il padding-destra sul tuo selectDiv esistente o margine-destra su quel div interno.

fonte

2012-05-29 19:21:15

Puoi pubblicare come lo faresti? Quando provo a farlo, è così che il div con l'immagine a discesa non è più al di sotto della selezione (che lo rende così quando si fa clic sull'immagine, il menu a discesa non appare più). –

Aggiungi float: a sinistra verso il div interno, o usa uno span invece di un div per quello. È perché è chiaro. –

Siamo spiacenti. Su un cellulare, quindi programmare qualcosa di più utile diventerà un incubo al momento. –

Styling a <select> in problemi CSS

risposta

Problemi correlati