Eredmény: 1 - 3 (3) összesen

Téma: Checkbox formázása CSS-el

  1. #1
    Új tag
    Csatlakozott
    16-11-29
    Hozzászólás
    2
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás Checkbox formázása CSS-el

    Sziasztok!

    Nem régen kezdtem el tanulni egy képzésen, így lehet, hogy hülyeséget fogok kérdezni, de próba szerencse.
    Checkboxot szeretnék formázni csak CSS segítségével. A feladat az lenne, hogy a checkbox legyen lekerekített és lila pipa kerüljön bele.

    Ti hogy oldanátok ezt meg?

    Jelenleg ott tartok, hogy egy div-be próbáltam belepakolni, a lekerekítése is megvan, viszont a label szövege belecsúszott a kis négyzetembe. A pipáról már nem is beszélek. Valamin nagyon elcsúsztam úgyérzem.

    HTML kód:
    <fieldset>
    	<legend>Opciók</legend>
    	<div id="c1"><input type="checkbox" name="news" value="yes" /></div>
    	<label>Feliratkozom a hírlevélre</label>
    	<div id="c2"><input required="required" type="checkbox" name="eula" value="yes" /></div>
    	<label>Elfogadom a feltételeket</label>
    </fieldset>
    Kód:
    input[type=checkbox] {
    	display: none;
    }
    div[id=c1]+label{
    	margin: 0 0 0 325px;
    	width:10px;
    	height:10px;
    	border:1px solid #607d8b;
    	background:#fff;
    	border-radius: 2px;
    }
    div[id=c2]+label{
    	margin: 0 0 0 325px;
    	width:10px;
    	height:10px;
    	border:1px solid #607d8b;
    	background:#fff;
    	border-radius: 2px;
    }




  2. #2
    Mentor Sanyi49 logója
    Csatlakozott
    10-03-26
    Hely
    Hajdú-Bihar
    Hozzászólás
    348
    Begyűjtött 13 köszönetet
    12 hozzászólásával

    Alapbeállítás re: Checkbox formázása CSS-el

    Szia!

    Nem hülyeség amit kérdezel.

    Egy fajta megoldás:
    Custom checkboxes with CSS only



  3. Az alábbi felhasználók hálásak a válaszért:

    Karessz (2016-11-30)

  4. #3
    Új tag
    Csatlakozott
    16-11-29
    Hozzászólás
    2
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Checkbox formázása CSS-el

    Köszönöm szépen a válasz, neki is esek



Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •