Menu
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?
783
Just use label:focus-within {} to style a label with a checked radio or checkbox. Show activity on this post. Show activity on this post. As TimStieffenhofer mentioned in their answer, the easiest way is to have the input field as a child of the label and use the :focus-within pseudo-class on the label.
Not as such. The value attribute holds a string. When you submit the form, that string will be sent to the server. You could use a serialisation technique to store a more complex data structure as a string (for example: JSON) and then decode it on the server.
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); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
