html - 将选择选项放入输入字段中

Question

input {
  width: 100%;
}

.input-currency:after {
  position: absolute;
  right: 0;
  top: 10px;
  content: 'USD';
  border-left: 1px solid black;
  padding: 0 7px;
  padding-right: 4em;
}

<div class="input-currency">
  <input id="value" name="value" type="text" class="form-control m-input class" aria-describedby="basic-addon1">
</div>

我有一个像这样的输入字段:

<div class="input-currency">
  <input id="value" name="value" type="text" class="form-control m-input class" aria-describedby="basic-addon1">
</div>

我在此输入的右侧添加了货币文本:

input {
  width: 100%;
}

.input-currency:after {
  position: absolute;
  right: 0;
  top: 10px;
  content: 'USD';
  border-left: 1px solid black;
  padding: 0 7px;
  padding-right: 4em;
}

现在我想在输入的右侧添加其他货币文本的选择选项，当我单击“USD”文本时，它将显示其他选项，例如“EUR”，...但布局CSS将和我旧的 css 一样，一条垂直线和文本，没有别的。

我必须使用选择选项，因为我想在提交表单以将其保存在数据库中时获取此货币值。

你能帮我吗？

非常感谢!

Answer 1

将 input 和 select 标记放入容器中，删除两者的默认样式，然后向容器本身添加边框(或轮廓，如果您愿意) .

input {
  width: 80vw;
  outline: none;
  border: none;
}

select {
  width: 20vw;
  outline: none;
  border: none;
}

.inputContainer {
  display: flex;
  flex-direction: row;
  gap: 2px;
  border: 1px solid black;
}

<div class="inputContainer">
  <input id="value" name="value" type="text" class="form-control m-input class" aria-describedby="basic-addon1">
  <select>
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
  </select>
</div>