Zmiana koloru labelu dla checkboxa po kliknięciu w niego.

pytanie zadane 31 marca 2020 w HTML i CSS przez halotelefonek Bywalec (2,410 p.)

Witam, Mam wydawałoby się proste pytanie ale jeszcze tego nie robiłem i mam problem.

Chciałbym żeby przed kliknięciem w checkboxa jego label był clasy "alert alert-secondary" (szary w bootstrapie)

a po kliknięciu był clasy "alert alert-danger" (czerwony)

mogłaby być również zmiana koloru w css po kliknięciu na czerwony a po odznaczeniu na szary,

ale najlepiej gdyby było to na bootstrapowych alertach.

Z góry dziękuję za wszelką pomoc :)

2 odpowiedzi

odpowiedź 31 marca 2020 przez frostify Mądrala (5,640 p.)

Jeżeli input i label znajdują się wewnątrz tego samego elementu (są jego dziećmi), najpierw input później label to spróbuj dodać ten kod:

input[type=checkbox]:checked + label {
  style css
  }

Oczywiście w miejsce input[type=checkbox] możesz wpisać tylko samo id swojego inputa, a w miejsce label może być tylko jego klasa.

Wtedy, gdy checkbox będzie zaznaczony, wczytają się podane wewnątrz style.

Możesz więc ręcznie ustawić jakie chcesz style.

Gdybyś chciał by dodawało klasę do labela po zaznaczeniu checkboxa, trzeba by było użyć js-a.

Ale łatwiej zrobić to po prostu w css.

Gdybyś szukał, tu są style z bootstrap dla alert-danger:

    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;

komentarz 31 marca 2020 przez halotelefonek Bywalec (2,410 p.)

Dzięki, zaraz to wypróbuję :)

komentarz 31 marca 2020 przez halotelefonek Bywalec (2,410 p.)

Zrobiłem coś takiego narazie bez bootstrapa i nie działa

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">

<title>Tytuł Strony WWW</title>

        <style type="text/css">

        input[type=checkbox]:checked + label 
        {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        } 

        </style>
</head>

<body>

<form>
<label>Pozycja1: <input type="checkbox" name="platnosc" value="gotowka" /></label> 
<label>Pozycja2: <input type="checkbox" name="platnosc" value="karta" /></label>
</form>



</body>
</html>