HTML5 数字输入字段，末尾带有货币符号答案

【问题标题】：HTML5 number input field with currency symbol in the end of itHTML5 数字输入字段，末尾带有货币符号
【发布时间】：2016-01-02 10:28:42
【问题描述】：

我希望有一个包含 EUR 符号的 html5 数字输入字段，并且无论对该字段进行什么编辑，都可以使该符号保持不变。我试图这样做，但欧元符号不会出现在字段内，我想在输入结束时移动这个符号，但由于某种原因，我不能这样做。我不想删除类表单控件。有什么帮助吗？

我的sn-p：

.input-symbol-euro {
  position: relative;
}

.input-symbol-euro input {
  padding-right: 15px;
}

.input-symbol-euro:after {
  position: absolute;
  top: 0;
  content: "€";
  right: 0px;
}

.form-control {
  display: block;
  width: 50%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
}

<span class="input-symbol-euro">
    <input type="number" value="0" min="0" step="1" class="form-control"  />
</span>

【问题讨论】：

我认为将搜索按钮包含到输入字段中的相同代码将在这里工作。去谷歌上查询。如果工作将其发布为答案

标签： javascript jquery html css

【解决方案1】：

您需要为<span> 提供某种有用的display 属性，以便它将包裹<input>。默认情况下，此元素的值为inline。在下面的示例中，我使用了inline-block，但block 也可以。

查看更新的fiddle。

.input-symbol-euro {
  position: relative;
  display: inline-block;
  width: 50%;
}

.input-symbol-euro input {
  padding-right: 15px;
  width: 100%;
}

.input-symbol-euro:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
  content: "€";
  right: 20px;
}

.form-control {
  display: block;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
}

<span class="input-symbol-euro">
    <input type="number" value="0" min="0" step="1" class="form-control"  />
</span>

【讨论】：