直接给 input 加伪元素 不生效~ 在 input 外面 包一层 div 父元素~
<div class='input-area'>
<input placeholder="请输入手机号" type='text'>
</div>
css样式~
.input-area {
position: relative;
margin-top: 0.44rem;
height: 0.88rem;
width: 99%;
&:after {
content: '';
display: block;
position: absolute;
border: 1px solid #ccc;
border-radius: 8px;
transform: scale(0.5);
left: 0;
top: 0;
width: 200%;
height: 200%;
transform-origin: 0 0;
}
}
.input-area input {
text-indent: .37rem;
position: absolute;
top: 1px;
left: 1px;
width: 99%;
height: 94%;
z-index: 2;
border-radius: 8px;
}
z-index层级关系需要调整一下,input 会把 他的父元素覆盖上 导致 边框不显示 通过z-index层级关系调整一下就好啦~