无法将按钮嵌入Input框？打造带下拉箭头组合输入框遇问题

我想要创建一个包含带向下箭头按钮的Input框，用户点击该按钮可展开或收起列表，但无法将按钮嵌入Input框内，请问我遗漏了什么？

当前代码：

.input-wrapper {
  position: relative;
}

.combobox-input {
  font-size: 16px;
  font-weight: normal;
  color: #4d4d4d;
  background: #ffffff;
  border: 1px solid #828995;
  height: 30px;
  padding: 4px 10px;
}

.combobox-arrow {
  display: inline-block;
  padding: 6px;
  border: none;
  background-color: white;
  background-image: url(...);
  width: 25px;
  height: 25px;
}

<div className="input-wrapper">
  <input className="combobox-input"/>
  <button className="combobox-arrow" ></button> 
</div>

解决方案 #

要把按钮嵌入输入框内，需要通过绝对定位将按钮定位到输入框内部，同时调整输入框的内边距避免内容被遮挡。修改后的代码如下：

修改后的CSS

.input-wrapper {
  position: relative;
  /* 让容器宽度随输入框自适应，避免占满整行 */
  display: inline-block;
}

.combobox-input {
  font-size: 16px;
  font-weight: normal;
  color: #4d4d4d;
  background: #ffffff;
  border: 1px solid #828995;
  height: 30px;
  /* 右侧留足够内边距，防止文字被按钮遮挡 */
  padding: 4px 35px 4px 10px;
  width: 100%;
  /* 确保内边距不会额外增加输入框宽度 */
  box-sizing: border-box;
}

.combobox-arrow {
  /* 绝对定位到容器右侧 */
  position: absolute;
  right: 2px;
  top: 50%;
  /* 垂直居中按钮 */
  transform: translateY(-50%);
  padding: 0;
  border: none;
  /* 透明背景，和输入框融为一体 */
  background-color: transparent;
  background-image: url(...);
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  cursor: pointer;
}

修改后的HTML

<div className="input-wrapper">
  <input className="combobox-input"/>
  <button className="combobox-arrow"></button> 
</div>

关键改动说明 #

• 给.input-wrapper添加display: inline-block，让容器宽度匹配输入框，避免容器占满整行。
• 调整.combobox-input的右侧内边距，给按钮留出空间，同时用box-sizing: border-box保证输入框总宽度不变。
• 对.combobox-arrow使用绝对定位，将其固定在输入框右侧垂直居中位置，设置透明背景让它和输入框视觉上融为一体。

内容的提问来源于stack exchange，提问作者TSDev