Styling input radio with css [duplicate]

Question

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?

Answer 1

Like this

DEMO

CSS

#slideselector {     position: absolue;     top:0;     left:0;     border: 2px solid black;     padding-top: 1px; } .slidebutton {     height: 21px;     margin: 2px; } #slideshow {      margin: 50px auto;      position: relative;      width: 240px;      height: 240px;      padding: 10px;      box-shadow: 0 0 20px rgba(0,0,0,0.4);  }  #slideshow > div {      position: absolute;      top: 10px;      left: 10px;      right: 10px;      bottom: 10px;     overflow:hidden; }  .imgLike {     width:100%;     height:100%; } /* Radio */  input[type="radio"] {     background-color: #ddd;     background-image: -webkit-linear-gradient(0deg, transparent 20%, hsla(0,0%,100%,.7), transparent 80%),                       -webkit-linear-gradient(90deg, transparent 20%, hsla(0,0%,100%,.7), transparent 80%);     border-radius: 10px;     box-shadow: inset 0 1px 1px hsla(0,0%,100%,.8),                 0 0 0 1px hsla(0,0%,0%,.6),                 0 2px 3px hsla(0,0%,0%,.6),                 0 4px 3px hsla(0,0%,0%,.4),                 0 6px 6px hsla(0,0%,0%,.2),                 0 10px 6px hsla(0,0%,0%,.2);     cursor: pointer;     display: inline-block;     height: 15px;     margin-right: 15px;     position: relative;     width: 15px;     -webkit-appearance: none; } input[type="radio"]:after {     background-color: #444;     border-radius: 25px;     box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4),                 0 1px 1px hsla(0,0%,100%,.8);     content: '';     display: block;     height: 7px;     left: 4px;     position: relative;     top: 4px;     width: 7px; } input[type="radio"]:checked:after {     background-color: #f66;     box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4),                 inset 0 2px 2px hsla(0,0%,100%,.4),                 0 1px 1px hsla(0,0%,100%,.8),                 0 0 2px 2px hsla(0,70%,70%,.4); }