<!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>
