Adding Currency Value in Css puts it onto seperate line - html

Question

I've added the following to the css and html file:
.currencyinput {
border: 1px inset #eee;
}
.currencyinput input {
border: 0;
}
<td><span class="currencyinput">$<input type="text" name="amount"></span></td>
And my resulting page shows the $ and then the textbox on a new line below it. I was intending the $ to be in the textbox.
Appreciate any insight on this. Thanks!

Answer 1

Consider simulating an input field with a fixed using a span with a border around a border less input field. Here's a basic example:
<div class="container">
<h3>Basic form example</h3>
<div class="form-group">
<div class="input-icon">
<i>$</i>
<input type="text" class="form-control" placeholder="0.00">
</div>
</div>
<div class="form-group">
<div class="input-icon input-icon-right">
<i>€</i>
<input type="text" class="form-control" placeholder="0.00">
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="fa fa-bitcoin"></i>
<input type="text" class="form-control" placeholder="0.00">
</div>
</div>
<h3>Example using <code>form-inline</code></h3>
<div class="alert alert-danger visible-xs">This window needs to be made
larger to see the inline example.</div>
<form class="form-inline">
Some text here
<div class="form-group input-icon">
<i>$</i>
<input type="text" class="form-control" placeholder="0.00">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
CSS:
.input-icon {
position: relative;
}
.input-icon > i {
position: absolute;
display: block;
transform: translate(0, -50%);
top: 50%;
pointer-events: none;
width: 25px;
text-align: center;
font-style: normal;
}
.input-icon > input {
padding-left: 25px;
padding-right: 0;
}
.input-icon-right > i {
right: 0;
}
.input-icon-right > input {
padding-left: 0;
padding-right: 25px;
text-align: right;
}

Answer 2

use this css for remove focus border input:focus{outline: none;}
.currencyinput span{
position: relative;
}
.currencyinput input{
padding-left:20px;
}
.currencyinput span{
left:15px;
top:0
position: absolute;
}
.currencyinput input:focus {
outline: none;
}
<span class="currencyinput"><span>$</span><input type="text" name="amount"></span>