input 输入框 移动端1px 问题

直接给 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层级关系调整一下就好啦～