Custom Radio Buttons

by Allie Yu

HTML

<h1>Position Radios</h1>

<span>
<input id="Radio1" name="Radios" type="radio" value="Option 1" checked="checked">
<label for="Radio1"></label>
</span>

<span>
<input id="Radio2" name="Radios" type="radio" value="Option 2" >
<label for="Radio2"></label>
</span>

<span>
<input id="Radio3" name="Radios" type="radio" value="Option 3" >
<label for="Radio3"></label>
</span>

<span>
<input id="Radio1" name="Radios" type="radio" value="Option 1" checked="checked">
<label for="Radio1"></label>
</span>

<span>
<input id="Radio2" name="Radios" type="radio" value="Option 2" >
<label for="Radio2"></label>
</span>

<span>
<input id="Radio3" name="Radios" type="radio" value="Option 3" >
<label for="Radio3"></label>
</span>
<span>
<input id="Radio1" name="Radios" type="radio" value="Option 1" checked="checked">
<label for="Radio1"></label>
</span>

<span>
<input id="Radio2" name="Radios" type="radio" value="Option 2" >
<label for="Radio2"></label>
</span>

<span>
<input id="Radio3" name="Radios" type="radio" value="Option 3" >
<label for="Radio3"></label>
</span>

<!-- <h1>With Checkboxes</h1>
<span>
<input id="Check1" name="Checks" type="checkbox" value="Item 1">
<label for="Check1">Item 1</label>
</span>

<span>
<input id="Check2" name="Checks" type="checkbox" value="Item 2">
<label for="Check2">Item 2</label>
</span>

<span>
<input id="Check3" name="Checks" type="checkbox" value="Item 3">
<label for="Check3">Item 3</label>
</span> 




body {margin: 2em; font-family: Arial, Helvetica, sans-serif;}
span {
    /* style this span element so we can display nicely, this stlying is not neccessary */
    margin: 10px 0;
    display: inline-block;
    width: 100%;
    float: left;
    
}

input[type="radio"], 
input[type="checkbox"] {
    /* hide the inputs */
    opacity: 0;
}

/* style your lables/button */
input[type="radio"] + label, 
input[type="checkbox"] + label {
    /* keep pointer so that you get the little hand showing when you are on a button */
    cursor: pointer;
   ...

CSS

body {margin: 1em; font-family: Arial, Helvetica, sans-serif;}
span {
    /* style this span element so we can display nicely, this stlying is not neccessary */
    margin: 10px 0;
    display: inline;
    float: left;
}
span:nth-child(3n+2) {
    clear: left;
}

input[type="radio"] {
    /* hide the inputs */
    opacity: 0;
}

label {
    cursor: pointer;
    display: inline-block;
    line-height: 30px;
    width: 20px;
    height: 30px;
    border-radius: 50%;
}

/* style your lables/button */
input[type="radio"] + label {
    /* keep pointer so that you get the little hand showing when you are on a button */
    cursor: pointer;
    /* the following are the styles */
    padding: 4px 10px;
    border: 1px solid #ccc;
    background: #B8C1CF;
    color: white;
    border-radius: 50%;
}

input[type="radio"]:checked + label {
    /* style for the checked/selected state */
    background: #108AEE;
    border: 1px solid #108AEE;
    color: white;
    border-radius: 50%;
}

JavaScript

/* 
<h1>Position Radios</h1>
<span>
<input id="Radio1" name="Radios" type="radio" value="Option 1" checked="checked">
<label for="Radio1"></label>
</span>

<span>
<input id="Radio2" name="Radios" type="radio" value="Option 2" >
<label for="Radio2">2</label>
</span>

<span>
<input id="Radio3" name="Radios" type="radio" value="Option 3" >
<label for="Radio3">3</label>
</span>
























*/