HTML5数字输入字段，末尾带有货币符号 [英] HTML5 number input field with currency symbol in the end of it

问题描述

我希望有一个包含EUR符号的html5号码输入字段，无论字段发生什么编辑，都要保持符号。我试图这样做，但欧元符号不会出现在字段内，我想在输入结束时移动此符号但由于某些原因我不能这样做？我不想删除类表单-控制。有帮助吗？

I would like to have a html5 number input field containing the EUR sign, and no matter what editing occurs to the field, for the sign to be persistent. I tried to do that, but the EURO sign won't appear inside the field, I want to move this sign at the end of the input but for some reasons I can't do it?I don't want to remove class form-control. Any help?

我的html代码：

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

Css代码：

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

这是我的jsfiddle： DEMO

Here is my jsfiddle : DEMO

推荐答案

你需要给< span> 某种有用的显示属性，以便它包装<输入> 。默认情况下，此元素的值为 inline 。在下面的示例中，我使用了 inline-block ，但 block 就可以了。

You need to give the <span> some sort of useful display property so that it will wrap the <input>. By default this element has a value of inline. In the example below I've used inline-block, but block would do just fine.

查看更新的小提琴。

.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>

这篇关于HTML5数字输入字段，末尾带有货币符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！