implement an input box on the left, and the button on the left gets the effect of CAPTCHA, which can be displayed on both Wechat"s developer tool and Android side, that is, bug appears in the Apple style. How to solve the problem?
related codes
HTML Code:
<div class="get-yzm">
<div class="text-box">
<input type="text" id="yzm" placeholder="" style="font-size:14px;color: -sharp999999;" />
</div>
<div id="getyzm"></div>
</div>CSS Code:
.input-wrap .get-yzm{
margin-top: 20px;
border-radius: 10px;
overflow: hidden;
display: flex;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-wrap .get-yzm .text-box{
flex: 1;
overflow: hidden;
}
.input-wrap .get-yzm .text-box -sharpyzm{
padding: 16px 10px;
height: 100%;
width: 100%;
box-sizing: border-box;
background-color: -sharpefefef;
-webkit-appearance: none;
}
.input-wrap .get-yzm -sharpgetyzm{
display: flex;
align-items: center;
justify-content: center;
width: 30.1vw;
/*height: 45px;*/
font-size: 14px;
color: -sharpFFFFFF;
background-color: -sharpDEC27C;
} Page effect:
Wechat developer tool:
bug:
how to solve this bug on Apple end?