Diskuze: Lekce 10 - Bootstrap - Další možnosti formulářů

Pěkný článek. Pro ty, kteří chtějí jinou barvu označeného radioboxu, checkboxu (výchozí je tuším světlejší modrá) stačí doplnit do stylů následující řádek:
.custom-control-input:checked ~ .custom-control-indicator {background-color: red;}
Kde ~ znamená následující element po .custom-control-input a 'red' je barva, kterou je samozřejmě možné změnit.

Náhoda, teď jsem to sem vložil i s vysvětlením

No ale tohle mi právě nefunguje, ani s checked, ani s active
Živá ukázka
Co dělám blbě?

Něco máš špatně a nevím co. Mě to funguje, ukázku najdeš tady.
Možná špatně zavádíš Bootstrap?
Živá ukázka zde

Aha, tak to jsme se nepochopili. Mně nejde o pozadí, to je v poho, ale o ten rámeček okolo, co se objeví při kliku (čili při :active).

Jde o akci :focus a box-shadow
Přidal jsem do ukázky.

Super, díky.

Zkusil jsem se ještě potrápit se selectem. Výchozí položka jde nastylovat prakticky neomezeně, ale vyjížděcí options se mi vůbec nepovedly změnit (modrý pozadí, modrý rámeček). Poradíte? Ale kdyžtak existuje hodně knihoven se selectama...

Kód z vlastních stylů mi nechtěl fungovat, vlastní styly jako elementy <span> se nezobrazovaly. Tak jsem kouknul do dokumentace Bootstrapu, nahradil třídu custom-control-description za custom-control-label a vše zase funguje, jak má.

Možná by to chtělo opravit.

Ahoj,

v první řadě děkuji za super kurz, moc mě to baví. Mám dotaz ohledně následujícího kódu a chtěl bych vás poprosit o pomoc:

<span class="input-group-addon" id="checkbox-addon">
        <input type="checkbox" aria-label="Checkbox">

Takto napsaný checkbox se mi pak v prohlížeči vůbec nezobrazí a netuším proč. Když vymažu id="checkbox-addon" a class změním na "input-group-text", tak to funguje, ale defaultně mám zaoblené rohy, takže bych pak ještě musel upravovat třídi v CSS.

Verzi mám dle návodu 4.0, tudíž nevím, co dělám špatně.

Moc děkuji za případné rady a připomínky.