不说话，直接上代码
不需要图片，css解决
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>修改input默认样式</title>
<style>
.subject_mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
.double_maskborder {
height: 180px;
width: 245px;
background: #FFFFFF;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 5px;
box-sizing: border-box;
padding: 20px;
}
.double_code {
color: #FFFFFF;
background: #9c27b0;
display: inline-block;
padding: 10px 65px;
border-radius: 3px;
font-size: 14px;
}
.smart-form .radio {
position: relative;
padding-left: 20px;
line-height: 25px;
}
.smart-form .radio input {
position: absolute;
left: -9999px;
}
.smart-form .radio i {
position: absolute;
top: 0px;
left: 0;
width: 12px;
height: 12px;
outline: 0;
border-width: 1px;
border-style: solid;
border-radius: 50%;
}
.smart-form .radio input+i:after {
content: ‘‘;
top: 0px;
left: 0px;
width: 13px;
height: 13px;
border-radius: 50%;
position: absolute;
opacity: 0;
transition: opacity .1s;
-webkit-transition: opacity .1s;
background-color: guolao #9c27b0;
}
.smart-form .radio input:checked+i:after {
opacity: 1;
}
.smart-form .radio input:checked+i {
border: none;
}
</style>
</head>
<body>
<div class="subject_mask">
<div class="double_maskborder">
<p>您需要购买的科数？</p>
<form action="" class="smart-form">
<section>
<div class="row">
<div class="col col-4">
<label class="radio">
<input type="radio" name="subject" checked="checked">
<i></i>1科</label>
<label class="radio">
<input type="radio" name="subject">
<i></i>2科</label>
<label class="radio">
<input type="radio" name="subject">
<i></i>3科</label>
<label class="radio">
<input type="radio" name="subject">
<i></i>4科</label>
</div>
</div>
</section>
</form>
<p class="double_code">领取优惠码</p>
</div>
</div>
</body>
</html>