如何在输入框右侧嵌入样式一致的货币选择select下拉框

HTML结构修改 #

移除原有伪元素实现逻辑，在.input-currency容器内和金额输入框同级位置插入原生select元素，设置独立name属性供表单提交取值，默认选中USD，按需添加其他货币选项即可：

<div class="input-currency">
  <input id="value" name="value" type="text" class="form-control m-input class" aria-describedby="basic-addon1">
  <select name="currency" class="currency-select">
    <option value="USD" selected>USD</option>
    <option value="EUR">EUR</option>
    <option value="JPY">JPY</option>
    <option value="GBP">GBP</option>
    <option value="CNY">CNY</option>
    <!-- 可按需追加其他货币选项 -->
  </select>
</div>

CSS样式调整 #

首先删除原有.input-currency:after的全部伪元素样式，替换为以下样式，完全保留原有货币标识的视觉效果，同时清除select原生默认控件样式：

/* 给容器设置相对定位，作为内部绝对定位元素的参照 */
.input-currency {
  position: relative;
}

input {
  width: 100%;
  box-sizing: border-box;
  /* 右侧留出足够空间，避免输入的金额文本被货币选择器遮挡 */
  padding-right: 5em;
}

.currency-select {
  /* 以下属性完全复用原有伪元素的定位、边框、间距规则，保证视觉1:1对齐 */
  position: absolute;
  right: 0;
  top: 10px;
  border-left: 1px solid black;
  padding: 0 7px;
  padding-right: 4em;

  /* 以下属性用于清除select原生默认样式 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
  outline: none;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  user-select: none;
}

/* 可选：适配下拉展开后的选项样式，不影响收起态视觉 */
.currency-select option {
  font: inherit;
  padding: 2px 7px;
}

实现说明 #

• 表单提交时会自动携带value（输入金额）、currency（选中货币编码）两个参数，后端可直接取值入库，无需额外编写JS同步赋值逻辑
• 收起状态下无任何select默认控件的多余样式（下拉箭头、默认边框、灰色背景等），和原有固定USD标识的视觉效果完全一致
• 完全保留原生select的交互特性：点击触发展开、键盘方向键选择、回车确认、屏幕阅读器识别都正常可用，无自定义下拉组件的兼容性问题
• 若后续需要调整货币标识位置、竖线样式，直接修改.currency-select对应属性即可，逻辑和修改原伪元素样式完全一致

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