Jak zmienić styl pola wyboru "etykieta grupy optycznej

Mam proste pole wyboru z opcją grupy w mojej aplikacji.Jak zmienić styl pola wyboru "etykieta grupy optycznej

<select> 
    <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
</optgroup> 
    ---- 
    ---- 
    ---- 
</select>

Po wyświetleniu w przeglądarce etykieta grupy opcji jest wyświetlana pogrubieniem i kursywą; Chcę, żeby był wyświetlany bez żadnego z tych stylów.

Źródło

2011-09-17 gnanz

Niestety, wybrane pola są jedną z niewielu rzeczy, które można dodać do stylu CSS. Zwykle ogranicza się to do sposobu, w jaki przeglądarka renderuje.

Przykładowo wygląda to w Chrome:

enter image description here

I to Firefox:

enter image description here

Źródło

2011-09-17 04:51:14 wesbos

Więc co oznacza, nie możemy zastąpić przeglądarki stylów za pomocą etykiet wyświetlacz optiongroup w Powyższy zrzut ekranu szwedzkich samochodów osobowych i samochodów amerykańskich? I wan, aby wyświetlić te etykiety w normalnej wagi czcionek dla wszystkich przeglądarek. Chcę wyświetlić to w zwykłej czcionce dla wszystkich przeglądarek. – gnanz

Tak, nie możesz tego zrobić, niestety, za pomocą CSS, będącego częścią przeglądarki Chrome. – wesbos

css podane przez Helrika działa dla Firefox – gnanz

Można projektować pole zaznaczania przy użyciu tylko CSS, to wymaga rodzaj pracy:

Najpierw otaczamy go divem i nadajemy mu klasę:

<div class="selectStyle"> 
    <select> 
     <option>First Option</option> 
     <option>Second Option</option> 
    </select> 
</div>

Następnie upewnij się, że wybierz elementy są urządzone w pewien sposób za pomocą CSS:

.selectStyle select { 
    background: transparent; 
    width: 250px; 
    padding: 4px; 
    font-size: 1em; 
    border: 1px solid #ddd; 
    height: 25px; 
}

I styl div:

.selectStyle { 
    width: 235px; 
    height: 25px; 
    overflow: hidden; 
    background: url(yourArrow.png) no-repeat right #ccc; 
}

Źródło

2011-09-17 05:03:40

Chcę tylko styl etykiety Optgroup – gnanz

Następnie po prostu cel grupy optgroup: optgroup [label = "szwedzkie samochody"] –

Gnanz mówi o atrybucie etykiety. To, że konkretnie chodzi o grupę optyczną, tak naprawdę nie rozwiązuje problemu. –

Na większości przeglądarek (testowane na najnowszym IE i FF), można łatwo zmienić etykietę grupy optycznej tylko za pomocą CSS:

select optgroup{ 
    background:#000; 
    color:#fff; 
    font-style:normal; 
    font-weight:normal; 
    }

Oczywiście można ustawić dowolną nazwę klasy zamiast znacznika html.

Nawiasem mówiąc, zgodnie z innymi odpowiedziami, wciąż jest niewiele opcji CSS do użycia z polami wyboru, a wielu webmasterów nadpisuje je za pomocą metody podanej przez user949847. Ale powyższy kod powinien wystarczyć do spełnienia twoich potrzeb.

Źródło

2012-07-19 08:19:22 Helrik

działa z firefox, nadal nie może naprawić IE – gnanz

Działa w IE10, FF21, Chrome28 i Opera12 od tej daty. (Niestety, nie masz zainstalowanego Safari!) Uwaga: w większości wspomnianych przeglądarek stylizowana jest cała sekcja , a nie tylko etykieta. –

Jeśli zastosujesz style do znaczników 'option' oraz znaczników' optgroup', możesz skutecznie kontrolować prezentację etykiety bez zmiany standardowej prezentacji elementów listy. – jatrim

Firefox styl etykieta stosując tę zasadę:

optgroup:before { 
    content: attr(label); 
    display: block; 
}

Można go zastąpić.

Źródło

2013-02-06 14:13:29 nniico

jesteś legendą. To działa przyjemność. Zaznaczam Cię ... –

-1

Aby poznać inne podejście do obejścia problemów z opcjami stylizacji, sugeruję użycie opcji wyłączonych.

<option disabled>[group label]</option>

możesz zrobić zdjęcie, stylizując je przez np.

<style> [disabled] { color:#000; background-color:#CCC } </style>

Źródło

2013-11-08 10:02:26 Risingson

Zauważyłem, że nie jest to styl na urządzeniach mobilnych. Czy jest jakiś sposób na zrobienie tego? – riotgear

Jak zmienić styl pola wyboru "etykieta grupy optycznej

Odpowiedz

Powiązane problemy