HI WELCOME TO SIRIS

Use div as radio-button

Leave a Comment
.labl {
    display : block;
    width: 400px;
}
.labl > input{ /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}
.labl > input + div{ /* DIV STYLES */
    cursor:pointer;
    border:2px solid transparent;
}
.labl > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
    background-color: #ffd6bb;
    border: 1px solid #ff6600;
}
<label class="labl">
    <input type="radio" name="radioname" value="one_value" checked="checked"/>
    <div>Small</div>
</label>
<label class="labl">
    <input type="radio" name="radioname" value="another" />
    <div>Small</div>
</label>

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.