Mantieni spazi bianchi in html seleziona le opzioni degli elementi usando "white-space: pre" NON funziona

Question

Il mio problema deriva dal menu a discesa HTML selezionare non è in grado di conservare più spazi bianchi consecutivi nelle sue opzioni. Ecco un esempio di testcase e risultati. Il "css di classe white-space: pre" sembra funzionare solo per qualsiasi elemento html tranne le opzioni di elemento select. C'è qualche letteratura o casi che identificano tale problema? Eventuali suggerimenti/consigliano utili

print "<style>.keepwhitespace { white-space: pre }</style> 
<p class='keepwhitespace'>abc def</p> 
abc def 
<br/> 
<br/>select and options with keepwhitespace 
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\" class='keepwhitespace'> 
<option class='keepwhitespace'>Any </option> 
<option class='keepwhitespace'>abc def </option> 
<option class='keepwhitespace'> Any </option> 
<option class='keepwhitespace'>abc def </option> 
</select> 
<br/>select with keepwhitespace 
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\" class='keepwhitespace'> 
<option >Any </option> 
<option >abc def </option> 
<option> Any </option> 
<option>abc def </option> 
</select> 
<br/>options with keepwhitespace 
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\"> 
<option class='keepwhitespace'>Any </option> 
<option class='keepwhitespace'>abc def </option> 
<option class='keepwhitespace'> Any </option> 
<option class='keepwhitespace'>abc def </option> 
</select>"; 

risultato è simile al seguente:

precaricati Come si può vedere nel tag elemento "p" (e qualsiasi altra che ho provato ad utilizzare, ha lavorato testo ben formattazione con la " spazio bianco" stile css. Eppure la sELECT non.

sulla selezione per visualizzare la stringa di valore di oggetto e la lunghezza della stringa (lunghezza avrebbero dovuto essere 10 invece di 7, 'abc def' è di 8 caratteri in lunghezza)

Qualsiasi aiuto apprezzato. ;)

LUHFLUH

Answer 1

ingressi Modulo di solito mappa ai loro relativi controlli nativi del sistema operativo in modo che possano essere difficili da stile. La solita soluzione alternativa per evitare che spazi bianchi si riducano in 1 spazio in <option> s consiste nell'utilizzare lo   anziché gli spazi normali.

es. una delle opzioni potrebbe essere:

<option>&nbsp;Any&nbsp;&nbsp;</option> 

Per ulteriori aspetto personalizzato, si potrebbe nascondere il vero elemento di selezione del tutto e sostituirlo con markup personalizzati e javascript.