<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8" /> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no" /> <title>答题</title> <style> html,body,div,p,span,em,i,u,del,strong,a,b,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,iframe,form,label,button,input,textarea,pre,hr,table,tbody,th,td{margin:0;padding:0;word-wrap:break-word;word-break:break-all} html,body{width:100%;height: 100%;} html{font-size:62.5%;font-family: "微软雅黑";} body{background:#f6f6f6;} .answer-warrper{ width: 85%; margin: 0 auto; padding-top: 3rem; position: relative; background:#f6f6f6; } .question{ font-family: Adobe 黑体 Std; font-size: 1.5rem; } .answer-form{ line-height: 2rem; padding-top: 3.5rem; } .radio{ width:2rem; height:2rem; border-radius: 50%; position: relative; -webkit-appearance: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline: none; border:none; background-repeat:repeat; -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .radio::after{ content:''; width:2rem; height:2rem; -webkit-appearance: none; position: absolute; top:0; left:0; border:1px solid gray; border-radius:50%; padding: 0.4rem; background-clip: content-box; box-sizing:border-box; } .radio:checked::after{ outline: none; background-color:#dc3729; border:1px solid #dc3729; background-clip: content-box; -webkit-appearance: none; background-repeat:repeat; -webkit-background-clip:content-box; -webkit-text-fill-color:#dc3729; } .input-box{ width: 100%; height: 2rem; position: relative; margin-bottom: 3.5rem; } .input-box input{ margin-right: 2rem; -webkit-tap-highlight-color:rgba(0,0,0,0); } .input-box span{ text-align: center; font-size: 1.6rem; line-height: 2rem; height: 2rem; position: absolute; top: 0; color: #8c8c8c; } .answer-sure{ display: block; width: 95%; height: 4.5rem; margin: 0 auto; text-decoration: none; line-height: 4.5rem; text-align: center; background-color: #f86256; color: #ffffff; font-size: 1.7rem; border-radius: 5px; } </style> </head> <body> <div class="answer-warrper"> <!--问题--> <p class="question">xxxxxxxxxxxxx?</p> <!--答案选择--> <form action="#" method="get" class="answer-form"> <div class="input-box"> <input type="radio" class="radio" name="choose"> <span>A、红色</span> </div> <div class="input-box"> <input type="radio" class="radio" name="choose"> <span>B、绿色</span> </div> </form> </div> </body> </html>
input type=radio ios点击后黑色背景的解决
最新推荐文章于 2023-06-27 10:48:08 发布