Поле ввода номера HTML5 с символом валюты в конце его

Question

Я хотел бы иметь поле ввода номера html5, содержащее знак EUR, и независимо от того, какое редактирование происходит в поле, чтобы знак был постоянным. Я попытался это сделать, но знак 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.