Egyedi kinézetű checkbox és radio button készítése

2016-02-21

A custom select után, itt a custom radio és custom checkbox is.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<input id="c1" type="checkbox">
<label for="c1">
    <span class="outer"></span>
    <span class="text">option 1</span>
</label>

<input id="c2" type="checkbox">
<label for="c2">
    <span class="outer"></span>
    <span class="text">option 2</span>
</label>

<br><br>

<input id="r1" type="radio" name="r">
<label for="r1">
    <span class="outer"><span></span></span>
    <span class="text">option 1</span>
</label>

<input id="r2" type="radio" name="r">
<label for="r2">
    <span class="outer"><span></span></span>
    <span class="text">option 2</span>
</label>

CSS forráskód


input[type="checkbox"],
input[type="radio"] { display:none }

input[type="checkbox"] + label,
input[type="radio"] + label { margin-right:30px; cursor:pointer }

input[type="checkbox"] + label .outer,
input[type="radio"] + label .outer {
    display:inline-block;
    width:20px;
    height:20px;
    border:1px solid #607d8b;
    background:#fff;
    box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    vertical-align:middle;
    margin-right:10px
}
input[type="radio"] + label .outer {
    border-radius:50%
}

input[type="checkbox"]:checked + label .outer:before {
    content:'';
    display:block;
    width:19px;
    height:19px;
    background:center center no-repeat url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTQuMiAxMS4zIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNC4yIDExLjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzY2NjY2NiIgZD0iTTQuOSw3LjFDNy4zLDQuNyw5LjcsMi4zLDEyLDBjMC43LDAuNywxLjUsMS41LDIuMiwyLjEKCUMxMS4xLDUuMiw4LDguMyw0LjksMTEuM0MzLjMsOS43LDEuNiw4LjEsMCw2LjVjMC43LTAuNywxLjQtMS40LDIuMi0yLjFDMy4xLDUuMiw0LDYuMSw0LjksNy4xeiIvPgo8L3N2Zz4=)
}

input[type="radio"]:checked + label .outer span {
    width:12px;
    height:12px;
    display:block;
    border-radius:6px;
    background:#656565;
    margin:4px 0 0 4px
}