PDA

View Full Version : Radio button e Bootstrap: modificare il colore di default!


robertino_salemi
23-05-2020, 00:17
Ciao a tutti,
sto utilizzando questo theme AdminLTE (https://adminlte.io/), basato su Bootstrap.

Il mio problema non riguarda il template indicato, ma la modifica del colore dei radio button realizzati tramite Bootstrap e presenti nel template stesso.

Sono blu, vorrei di un altro colore, ho provato diverse soluzioni senza alcuni risultato e non ne vengo a capo!

Ho creato questo jsfiddle (https://jsfiddle.net/robertinosalemi/Lkhf6jox/10/)!

Grazie.

wingman87
23-05-2020, 09:19
Ciao,
nel jsfiddle hai incluso bootstrap 4.4.1, nel tema che stai usando invece č presente bootstrap 3.4.1 e in questa versione non sono presenti checkbox custom (ho spulciato la documentazione ma non li ho trovati).

Nel tema che hai scelto perņ sono presenti dei checkbox custom realizzati con un plugin. Li trovi in basso a destra in questa pagina: https://adminlte.io/themes/AdminLTE/pages/forms/advanced.html e se segui il link della documentazione (http://icheck.fronteed.com/) trovi come personalizzarli.

robertino_salemi
25-05-2020, 16:29
Grazie della segnalazione, ho guardato il plugin che mi hai indicato, ed effettivamente č un'ottima soluzione.

Alla fine, perņ, ho proferito utilizzare questa definiziione in modo da non aggiungere altri plugin/file esterni:

HTML:

<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="radio1" class="custom-control-input" name="radio" value="radio1" checked>
<label class="custom-control-label" for="radio1">Radio 1</label>
</div>

<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="radio2" class="custom-control-input" name="radio" value="radio2">
<label class="custom-control-label" for="radio2">Radio 2</label>
</div>


CSS:

.custom-control-input:checked~.custom-control-label::before {
border:0;
background-color: red;
}


Grazie ancora.