如何用输入文本框内嵌按钮/下拉菜单？

Question

在这样的输入旁边有一个完美的按钮，如何实现这种效果？

Answer 1

这对您来说是一个非常简单的解决方案。 position: absolute导致按钮和输入之间的空格被删除，并使其与输入“内联”。我使用border-left: none删除了与输入对齐的多余边框。甚至可以通过flex来完成！

button {
  background-color: white;
  border: 1px solid lightgrey;
  position: absolute;
  border-left: none;
  cursor: pointer;
}
button:hover {
  background-color: #4080ff;
  color: white;
}

input {
  border: 1px solid lightgrey;
}

<input type="text">
<button>></button>