Oto mój HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
Chcę, aby nazwa produktu (tj. „Produkt 1”, „Produkt 2” itp.) Była pogrubiona, a jej kategorie (tj. Elektronika, sport itp.) Kursywą, używając wyłącznie CSS. Znalazłem stare pytanie, w którym wspomniano, że nie jest możliwe używanie HTML i CSS, ale mam nadzieję, że jest teraz rozwiązanie.
html
css
drop-down-menu
MrClan
źródło
źródło
Odpowiedzi:
Istnieje tylko kilka atrybutów stylu, które można zastosować do
<option>
elementu.Wynika to z tego, że ten typ elementu jest przykładem „zastąpionego elementu”. Są zależne od systemu operacyjnego i nie są częścią HTML / przeglądarki. Nie można go stylizować za pomocą
CSS
.Istnieją zastępcze wtyczki / biblioteki, które wyglądają jak,
<select>
ale w rzeczywistości składają się ze zwykłychHTML
elementów, które MOŻNA stylizować.źródło
select > option
, ale nie ma do tego niezawodnego rozwiązania crossbrowser, a na chromie możesz przynajmniej dostosować rozmiar czcionki, rodzinę, tło i kolor pierwszego planu. Może jeszcze kilka poprawek, ale takie rzeczy jak wyściółka, kolor najechania i takie, których nie udało mi się zmienić. Rzeczywiście mogą istnieć alternatywy, ale w zależności od projektu tag <select> może być konieczny na przykład do weryfikacji kątowej lub z innego powodu.<option>
, ale pokazuje, jak emulować,<select>
aby można było stylizować opcje.OPTION
pomocą CSS za pomocą nowoczesnych przeglądarek - dodaj tag stylu do opcjiNie, nie jest to możliwe, ponieważ stylem tych elementów zajmuje się system operacyjny użytkownika. MSDN odpowie na twoje pytanie tutaj :
źródło
style="background-color: red;color: red;"
nie działa dla mnie EDYCJA: Po zamknięciu konsoli programisty zastosowano styl.Możesz do pewnego stopnia stylizować elementy opcji.
Za pomocą znacznika * CSS możesz stylizować opcje wewnątrz ramki rysowanej przez system.
Przykład:
Będzie to wyglądać tak:
źródło
Znalazłem i używam tego dobrego przykładu stylizacji selekcji i opcji. Możesz zrobić z tym zaznaczeniem wszystko, co chcesz. Oto skrzypce
HTML
css
JS
źródło
Oto kilka sposobów na styl
<option>
oraz<select>
użycie Bootstrap i / lub jquery. Rozumiem, że nie o to pyta oryginalny plakat, ale pomyślałem, że mogę pomóc innym, którzy natkną się na to pytanie.Nadal możesz osiągnąć cel, jakim jest stylizacja każdego z
<option>
osobna, ale może być również konieczne zastosowanie jakiegoś stylu<select>
. Moim ulubionym jest wspomniana poniżej biblioteka „Bootstrap Select”.Bootstrap Select Library (jquery)
Jeśli już używasz bootstrap, możesz wypróbować bibliotekę Bootstrap Select lub bibliotekę poniżej (ponieważ ma motyw bootstrap).
Pamiętaj, że możesz stylizować cały
select
element luboption
elementy osobno.Przykłady :
Zależności : wymaga jQuery v1.9.1 +, Bootstrap , Bootstrap's dropdown.js i CSS Bootstrap
Zgodność : niepewny, ale bootstrap mówi, że „obsługuje najnowsze, stabilne wersje wszystkich głównych przeglądarek i platform”
Demo : https://developer.snapappointments.com/bootstrap-select/examples/
Select2 (JS lib)
Dostępna jest biblioteka o nazwie Select2 .
Zależności : Biblioteka to tylko JS + CSS + HTML (nie wymaga JQuery).
Kompatybilność : IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+
Demo : https://select2.org/getting-started/basic-usage
Dostępny jest również motyw bootstrap .
Brak przykładu Bootstrap:
Przykład ładowania początkowego:
MDBootstrap ($ i Bootstrap i JQuery)
Jeśli masz dodatkowe pieniądze, możesz skorzystać z biblioteki premium MDBootstrap . (To jest cały zestaw interfejsu użytkownika , więc nie jest lekki)
Pozwala to stylizować wybrane i opcjonalne elementy przy użyciu projektu Materiał .
Jest darmowa wersja, ale nie pozwoli ci użyć ładnego materiału!
Zależności : Bootstrap 4 , JQuery,
Kompatybilność : „obsługuje najnowsze, stabilne wersje wszystkich głównych przeglądarek i platform”.
Demo : https://mdbootstrap.com/docs/jquery/forms/select/#color
źródło
Wygląda na to, że mogę po prostu ustawić CSS
select
bezpośrednio w Chrome. Poniżej podano kod CSS i HTML:źródło
Jak już wspomniano, jedynym sposobem jest użycie wtyczki, która zastępuje
<select>
funkcjonalność.Lista wtyczek jQuery: http://plugins.jquery.com/tag/select/
Spójrz na przykład przy użyciu
Select2
wtyczki: http://jsfiddle.net/swsLokfj/23/źródło
Bootstrap pozwala na korzystanie ze stylizacji poprzez zawartość danych:
Przykład: https://silviomoreto.github.io/bootstrap-select/examples/
źródło
Niektóre właściwości mogą być stylizowane
<option>
tagowi:font-family
color
font-*
background-color
Możesz także użyć niestandardowej czcionki dla pojedynczego
<option>
tagu, na przykład dowolnej czcionki Google , ikon materiałów lub innych czcionek ikon od icomoon lub podobnych. (Może się to przydać w przypadku wyboru czcionek itp.)Biorąc to pod uwagę, możesz utworzyć stos rodziny czcionek i wstawić ikony w
<option>
znacznikach, np.skąd
★
pochodzi,Icons
a reszta pochodziRoboto
.Pamiętaj jednak, że niestandardowe czcionki nie działają w przypadku wyboru urządzeń mobilnych.
źródło
red
: <option style = "color: red;">Właściwie możesz dodać: przed i: po i styl. Przynajmniej to jest coś
źródło
Jest rok 2017 i można kierować na wybrane opcje wyboru. W moim projekcie mam tabelę z klasą = „wariacje” , a opcje wyboru znajdują się w komórce tabeli td = „wartość” , a selekcja ma identyfikator select # pa_color . Element opcjonalny ma również opcję class = „attach” (pośród innych znaczników class). Jeśli użytkownik jest zalogowany jako klient hurtowy, może zobaczyć wszystkie opcje kolorów. Ale klienci detaliczni nie mogą kupować 2 opcji kolorów, więc ich wyłączyłem
Zajęło to trochę logiki, ale oto, w jaki sposób celowałem w wyłączone opcje wyboru.
CSS
Dzięki temu moje opcje kolorów są widoczne tylko dla klientów hurtowych.
źródło
Pozostawiając tutaj szybką alternatywę, używając przełączania klas na stole. Zachowanie jest bardzo podobne do wybranego, ale można je stylizować za pomocą przejścia, filtrów i kolorów, każde dziecko osobno.
źródło
Możesz użyć stylów wbudowanych, aby dodać stylizację klienta do
<option>
tagów.Na przykład:
<option style="font-weight:bold;color:#09C;">Option 1</option>
zastosuje style tylko do tego konkretnego<option>
elementu.Następnie możesz użyć odrobiny magii javascript, aby zastosować style wbudowane do wszystkich
<option>
elementów w<select>
tagu, tak jak poniżej:var select = $(document).getElementById('#select-element-id')
var option = select.children('#option-element-id')
option.css('font-weight', 'bold')
option.css('font-size', '24px')
Możesz także użyć,
<option value="" disabled> <br> </option>
aby dodać podział między opcjami.źródło
Ten element jest renderowany przez system operacyjny, a nie HTML. Nie można go stylizować za pomocą CSS.
spróbuj tego, może ci to pomóc
źródło
Możesz dodać klasę i podać grubość czcionki: 700; w opcji. Ale dzięki temu cały tekst stanie się pogrubiony.
źródło
To na pewno zadziała. Opcja wyboru jest renderowana przez system operacyjny, a nie przez HTML. To jest styl CSS nie ma wpływu, .. ogólnie
option{font-size : value ; background-color:colorCode; border-radius:value; }
będzie działać, ale nie możemy dostosować wypełnienia, marginesu itp.
Poniżej kodu 100% pracy, aby dostosować tag wybierany z tego przykładu
źródło
Nawet jeśli nie ma wiele właściwości do zmiany, ale możesz osiągnąć następujący styl tylko za pomocą css:
HTML:
CSS:
źródło