Html 将 Select 选项放在输入字段中

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;
}

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>

Html相关问答推荐

卸载伪元素 destruct 了CSS

如何实现弯曲的梯形导航栏？

悬停效果在新西兰表上不起作用

如何更改Django中的默认按钮？

CSS中的转换属性是如何工作的？

div居中碰撞问题

为什么字体大小而不是 colored颜色 属性适用于元素？

HTML 重定向到当前服务器

文本不显示在 div 下方

网页爬虫：使用时光机器进行数据采集

拨动switch 在重新加载时未重置

如何截断一些文本并用双引号引起来？

透明渐变凹矩形

我应该如何使这个带有标签的隐藏复选框可访问

提交前的验证表单未显示任何验证消息？

Header 或 P 标记中的填充不能与 em 单元一起正常工作

CSS 斜角与 3 行对齐

让 Bootstrap 5 模式和背景占据父容器的宽度和高度，而不是全屏

focusout() Select 器不适用于搜索框

如何使用 ：hover zoom 重叠图像？