Question

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

我的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

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

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

1 个答案: