效果

vue项目，用stylus处理css样式

input放图标

<div class="jobs_input_wrapper">
    <input class="input_text" type="text" placeholder="搜索" v-model="userinput">
    <i class="icon iconfont icon-sousuo" v-if="isicon"></i>
</div>

ps：这里利用绝对定位iconfont图标调整位置，图标图层需要在input之上

.jobs_input_wrapper
      padding: 0 10px
      position: relative
      background-color: #f7f7f7
      display: flex // flex布局
      line-height: 20px // 用行高撑开高度
      justify-content: center // 内容居中
      .input_text
        border: 0
        width: 100%
        text-align: center
        line-height: 30px
        outline: 0;
        -webkit-appearance: none
        background-color: transparent // input背景透明
       .icon
        display: inline-block
        position: absolute // 绝对定位
        z-index: 2 // 图层
        padding-right: 35px
        margin-top: 3px
        color: #666

placeholder属性样式修改

input::-webkit-input-placeholder
  color: #888  // 字体颜色
  font-size: 12px  // 字体大小
  padding-left: 15px  // 位置：用padding改变和iconfont距离

监听input

简单监听input输入内容，输入内容时候iconfont图标会消失

data() {
    return {
      userinput: '', // 双向绑定数据
      isicon: true // 判断inconfont图标是否显示
    }
},
watch: {
    userinput(val, oldval) {
      if(val) {
        this.isicon = false
      }
      else {
        this.isicon = true
      }
    }
  }

ps：图标反转

1.垂直反转
用isA是否显示隐藏classA和iconA样式

<span :class="{'classA':isA}">
  地区
  <i class="iconfont icon-lower-triangle" :class="{'iconA':isA}"></i>
</span>

  .classA
    color: #f03d37 // 字体颜色
    .iconA
      display: inline-block
      -moz-transform:scaleY(-1)
      -webkit-transform:scaleY(-1)
      -o-transform:scaleY(-1)
      transform:scaleY(-1) // 垂直反转

效果：

2.水平反转

.iconA
      display: inline-block
      -moz-transform:scaleX(-1)
      -webkit-transform:scaleX(-1)
      -o-transform:scaleX(-1)
      transform:scaleX(-1) // 水平反转