自定义radio点击切换效果
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toggle-radio-button</title> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap" rel="stylesheet"> <style> body { font-family: 'Montserrat', sans-serif; font-weight: 400; line-height: 1.5; background-color: black; color: #d6d4d4; } h2 { font-size: 28px; font-weight: 600; margin: 0 0 10px 0; } .container { display: grid; grid-template-rows: 70px 50px 70px 70px; align-items: center; justify-content: center; width: calc(100vw - 40px); height: calc(100vh - 40px); padding: 20px; } svg { width: 40px; padding-right: 8px; } input[type="radio"] { opacity: 0; width: 0; height: 0; } .choice-option-yes, .choice-option-no { display: flex; justify-content: flex-start; align-items: center; } label { font-size: 20px; display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0.5; } /* Demo setup end */ #choice-radio-yes path, #choice-radio-no path { opacity: 0; } input[type="radio"]:checked ~ label { opacity: 1 } </style> </head> <body translate="no"> <div class="container"> <p>Experimenting styling radio buttons, SVG, animation and meaningful colors. <br /> (We can change the color of label as well.) </p> <h2>Do you Agree?</h2> <div class="choice-option-yes"> <input type="radio" name="choice" value="yes" id="yes"> <label for="yes"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"> <g id="choice-radio-yes"> <path d="M328.73,220.35c17.41-2.07,14.34,0,14.34,0L331.29,224c15.36-.52,26.12,2.07,15.88,3.11s-9.22,4.4,0,3.37" transform="translate(-320 -205)" fill="none" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" /> <circle cx="20" cy="20" r="15" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="3" /> </g> </svg> Yes </label> </div> <div class="choice-option-no"> <input type=&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0