Jak dodać dopełnienie do listy rozwijanej html?

Question

Chcę dodać dopełnienie do opcji znacznika html "select".

Próbuję dodać go do właściwości stylu "wybierz" i "opcja" i nie działa w IE.

Co mogę zrobić?

Answer 1

OK, nienawidzę brzmieć wszystkie 1990, ale po prostu przed- i app-kończenie przestrzeń do tekstu opcji być akceptowalne dla pożądanych celów?

Answer 2

CSS:

option{ 
padding: 0.5em; 
} 

Answer 3

Trudno styl spadek w dół przeglądarce pole karne. Aby uzyskać dowolną kontrolę, musisz napisać kod zastępczy w JavaScript. Ostrzegamy jednak:

• Pamiętaj, że użytkownik może mieć trudności z użyciem rozwijanej - podejmuje usabilty uwzględnieniu
• Wymień wybierz element z JS - to kwestia dostępności (a także pozwala użytkownikom bez wsparcia JS do korzystania z danych wejściowych formularza)

Answer 4

następujące prace, w FF3 + i Midori (i prawdopodobnie innych przeglądarek WebKit):

select 
     {width: 14em; 
     margin: 0 1em; 
     text-indent: 1em; 
     line-height: 2em;} 

select * {width: 14em; 
     padding: 0 1em; 
     text-indent: 0; 
     line-height: 2em;} 

szerokość jest umożliwienie pl ough room w wyświetlanym polu select, gdy nie jest aktywny, margines robi to, co zawsze robi, text-indent służy do udawania dopełnienia między lewą granicą pola wyboru i wewnętrznym tekstem. line-height służy tylko do pionowego odstępu.

Nie mogę wypowiedzieć się na temat jego użycia w IE, obawiam się, więc jeśli ktokolwiek mógłby nakarmić - lub dostosować się do tego, co byłoby dobre. Warto zauważyć, że rozwijana część selekcji (select *) nie ma dla mnie żadnego wpływu poza FF3, z jakiegokolwiek powodu, więc jeśli to było pytanie, na które chciałeś odpowiedzieć, przepraszam, że nie oferuję niczego nowego.

demo pod adresem: http://davidrhysthomas.co.uk/so/select-styling.html

Answer 5

Nie mogłem tego zrobić z wyściełaniem lub odstępami z jakiegoś powodu. Poszedłem roztworem jQuery, który wygląda tak:

$(document).click(function(){ 
    $('#selector option').each(function(){ 
    $(this).html("  "+$(this).text()); 
    }); 
}); 

Answer 6

utworzyć klasę dla SELECT

.listBox{ 
    width: 200px; 
    ...etc 
} 

Teraz określić CSS dla opcji SELECT

.listBox option{ 
    padding:4px; 
    ...etc 
    } 

Testowano na IE 10