I have this slideshow with [input type="radio"]
: http://jsfiddle.net/Jtec5/23/
Codes: CSS:
#slideselector {
position: absolue;
top:0;
left:0;
border: 2px solid black;
padding-top: 1px;
}
.slidebutton {
height: 21px;
margin: 2px;
}
I'm trying to style the input radio with css so it looks like that: any suggestions?
You should use some background image to your radio buttons and flip it with another image on change
.radio {
background: url(customButton.png) no-repeat;
}
See this Fiddle
<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio" /><label for="radio-2-1"></label>
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio" /><label for="radio-2-2"></label>
<input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio" /><label for="radio-2-3"></label>
.regular-radio {
display: none;
}
.regular-radio + label {
-webkit-appearance: none;
background-color: #e1e1e1;
border: 4px solid #e1e1e1;
border-radius: 10px;
width: 100%;
display: inline-block;
position: relative;
width: 10px;
height: 10px;
}
.regular-radio:checked + label {
background: grey;
border: 4px solid #e1e1e1;
}
Here is simple example of how you can do this.
Just replace the image file and you are done.
HTML Code
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p>
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>
CSS
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(check_radio_sheet.png) -57px top no-repeat;
}
Trident provides the ::-ms-check
pseudo-element for checkbox and radio button controls. For example:
<input type="checkbox">
<input type="radio">
::-ms-check {
color: red;
background: black;
padding: 1em;
}
This displays as follows in IE10 on Windows 8:
Source: Stackoverflow.com