text 利用隐藏属性，输入占满剩余空间，输入自适应

Posted 2021-05-02

span 和 input 在同一行，input 宽度不能写死，需要适配设备宽度，
可以利用 overflow:hidden; 实现，代码如下：

~~~html
<div class="form-item mobile-item">
  <span class="label">+{{telePhoneCode }}</span>
  <div><input class="phone-number " placeholder="{{ 'Mobile Number' | translate }}" type="tel" id="phone" ng-model="phoneNumber"
  maxlength="15" ng-click="clickInput()">
  </div>
</div>
~~~

~~~css
&.mobile-item {
  background-color: #f7f7f7;
  padding: 0 20px;
  > div {
  overflow: hidden;
  }
  input {
  background: transparent;
  width: 100%;
  padding: 15px 0;
  height: 50px; //不设置行高为80px，不美观
  }
}
~~~
参考：https://blog.csdn.net/denl0918/article/details/60763374