在输入框的末尾加单位

[jackPanyj]

做开发的时候遇到的一个问题

有三种方案：

1. 使用绝对定位，将文字单位飘过去。（由于简单就不概述了）

2. 后面添加一个span 将input的右边框设置为透明， span的左边框设置为 透明 造成连在一起的假象。

3. 也是我采用的方案， 采用伪类元素定位到相应的位置 结构如下

   <span data-unit="元"><input type="text"></span>
   

   由于input不支持::after伪类， 所以用一个span 包裹住它 css 如下：

     span {
      position: relative;
     }
     span::after {
      position: absolute;
      content: attr(data-unit);
      right: 10px;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
     }
     input {
      padding-right: 30px;
      height: 40px;
      width: 340px;
     }
   

   个人感觉这种解决方案要比前俩种优雅的多。

   第一种感觉扩展性不是很好

   第二种太繁琐，还得处理各种边框圆角

   查看demo