radio button css design for registration page
<!DOCTYPE html> <html> <head> <style> input[type = checkbox]{ -webkit-appearance: none; background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 3px; display: inline-block; position: relative; } input[type = checkbox]:checked { background-color: #e9ecee; border: 1px solid #adb8c0; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); color: #99a1a7; } </style> </head> <body> <form> <input type="checkbox" name="gender" value="male" checked> Male<br> <input type="checkbox" name="gender" value="female"> Female<br> <input type="checkbox" name="gender" value="other"> Other </form> </body> </html>
