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. :crying:

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;
}

---

Szia!

Nem hülyeség amit kérdezel.

Egy fajta megoldás:
Custom checkboxes with CSS only

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