目的

div模拟input实现输入框

实现方案

1. H5的全局属性contenteditable属性 : 带有contenteditable属性的div作为输入框（div可以根据内容自动调整高度）

H5代码块

<div class="search">
  <div contenteditable class="inputType" placeholder='请输入文字'></div>
  <div class="button">版权检索</div>
</div>

CSS代码块

双float + calc()计算属性[右边button固定 左边自适应]

/* 检索框 */
.search{
  position: absolute;
  z-index: 3;
  left: 25%;
  top: 220px;
  width: 50%;
  height: 40px;
  margin: 0 auto;
  border:1px solid rgba(0, 0, 0, 0.45);
  background: #fff;
  border-radius: 4px;
}
.inputType{
  width:calc(100% - 90px);
  float: left;
  line-height: 38px;
  height: 38px;
  text-indent: 1em;
}
.inputType:empty::before {/* 显示提示词 */
    content: attr(placeholder);
}
.button{
  color: #fff;
  line-height: 38px;
  text-align: center;
  background: rgba(204, 51, 0, 1);
  border-left:1px solid rgba(0, 0, 0, 0.45);
  width: 90px;
  height: 38px;
  float: right;
}

效果展示

窗口缩小后效果