能否在input元素内嵌入其他元素？价格输入框添加货币符号方案探讨

Absolutely! Besides using background-image, there are a few clean, practical ways to place a currency symbol (like $/€/£) between the input value and the native up/down arrows. Here are my favorite approaches:

1. Wrapper Container with Absolute Positioned Span #

This method keeps the native spin buttons intact and is super straightforward. We’ll wrap the input in a relative container, add padding to the input to make space for the symbol, then position a span right where we want it:

<div class="currency-input-wrapper">
  <input type="number" class="currency-input" value="0" min="0" step="0.01">
  <span class="currency-symbol">$</span>
</div>

.currency-input-wrapper {
  position: relative;
  display: inline-block;
}

.currency-input {
  padding-right: 25px; /* Reserve space for the symbol */
  width: 120px;
}

.currency-symbol {
  position: absolute;
  right: 30px; /* Adjust based on your browser's native spin button width */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Prevent the symbol from blocking input interactions */
  color: #666;
}

/* Optional: Tweak native spin button spacing */
.currency-input::-webkit-inner-spin-button {
  margin-right: 5px;
}

2. CSS Pseudo-Element on the Wrapper #

If you’d rather avoid adding an extra <span> element, use a pseudo-element on the wrapper instead. The logic is nearly identical to the span method:

<div class="currency-input-wrapper euro">
  <input type="number" class="currency-input" value="0" min="0" step="0.01">
</div>

.currency-input-wrapper {
  position: relative;
  display: inline-block;
}

.currency-input-wrapper::after {
  content: '$'; /* Default currency symbol */
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
}

/* Swap symbols for different currencies */
.currency-input-wrapper.euro::after {
  content: '€';
}
.currency-input-wrapper.pound::after {
  content: '£';
}

.currency-input {
  padding-right: 25px;
  width: 120px;
}

3. Custom Spin Buttons (Full Control) #

If you want total control over the spin button styling (and don’t mind replacing the native ones), hide the default arrows and add custom buttons alongside the currency symbol. This works consistently across all browsers:

<div class="custom-currency-input">
  <input type="number" class="custom-input" value="0" min="0" step="0.01">
  <span class="currency-symbol">£</span>
  <div class="spin-buttons">
    <button class="spin-up" type="button">↑</button>
    <button class="spin-down" type="button">↓</button>
  </div>
</div>

.custom-currency-input {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.custom-input {
  border: none;
  padding: 8px 10px;
  width: 100px;
  outline: none;
}

/* Hide native spin buttons across browsers */
.custom-input::-webkit-inner-spin-button,
.custom-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.custom-input {
  -moz-appearance: textfield;
}

.currency-symbol {
  padding: 0 5px;
  color: #666;
  border-left: 1px solid #ccc;
}

.spin-buttons {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #ccc;
}

.spin-up, .spin-down {
  border: none;
  background: #f5f5f5;
  padding: 4px 8px;
  cursor: pointer;
}

.spin-up:hover, .spin-down:hover {
  background: #eee;
}

Quick Notes #

• For the first two methods, you might need to adjust the right position slightly for Firefox, since its native spin buttons have different spacing than Chrome/Safari.
• The custom spin button method requires a tiny bit of JavaScript to make the buttons adjust the input value (just add click event listeners to increment/decrement the value).

内容的提问来源于stack exchange，提问作者Juan Antonio Rodríguez Gabriel