小程序input框letter-spacing失效，处理方法

拿到这样的图本来想用letter-spacing方式处理加定位完美设计图，结果在小程序里letter-spacing只对占位符有效。
尝试word-spacing也是没有效果的。于是借鉴他人思路完美解决此问题。

• block类名为每一个灰色块儿
• block>view是模拟光标
• block>text每个块对应的值
• numList是input框输入的字符串

结构说明每个灰色方块根据输入的value值得长度，控制光标在哪里展示，对应方块的值是多少
input框设置focus=‘true’ auto-focus='true’属性在真机拉起键盘

    <view class='blocks'>
      <view class="block">
        <view wx:if="{{!numList.length}}" class="cursor"></view>
        <text wx:if="{{numList.length}}">{{numList[0]}}</text>
      </view>
      <view class="block">
        <view wx:if="{{numList.length===1}}" class="cursor"></view>
        <text wx:if="{{numList.length>=2}}">{{numList[1]}}</text>
      </view>
      <view class="block">
        <view wx:if="{{numList.length===2}}" class="cursor"></view>
        <text wx:if="{{numList.length>=3}}">{{numList[2]}}</text>
      </view>
      <view class="block">
        <view wx:if="{{numList.length===3}}" class="cursor"></view>
        <text wx:if="{{numList.length>=4}}">{{numList[3]}}</text>
      </view>
      <view class="block">
        <view wx:if="{{numList.length===4}}" class="cursor"></view>
        <text wx:if="{{numList.length>=5}}">{{numList[4]}}</text>
      </view>
      <view class="block">
        <view wx:if="{{numList.length===5}}" class="cursor"></view>
        <text wx:if="{{numList.length>=6}}">{{numList[5]}}</text>
      </view>
       <input type='number' maxlength='6' focus='true' auto-focus='true'></input>

input {//脱离可视区域，偏移太少，输入6位数，可能有会出现input框，偏移太多微信开发者工具没办法输入内容
  margin-left: -120%;
}

.blocks {
  display: flex;
}

.block {
  width: 100rpx;
  height: 88rpx;
  background: #fafafa;
  margin-left: 18rpx;
}

.cursor {//光标的样式
  width: 1px;
  height: 40rpx;
  background-color: #000;
  animation: focus 0.7s infinite;
}

/* 光标动画 */

@keyframes focus {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}