dollar sign on an input

by Jayna

HTML

<h1>Putting a $ in a text input.</h1>
<p>You need a wrapper div to make this work because you can't put a before on an input. That's the grey background. It also needs to be display: inline.</p>
<div class="test">
    <input type="text"></input>
</div>

CSS

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}