Adding a dollar sign to an ion-input

Question

I currently have this:

<ion-item>
    <ion-label sale floating>Sale Price< /ion-label>
    <ion-input type="number" clearInput placeholder="$">< /ion-input>
</ion-item>

What I'd really like, is to add a $ to the front of any input so that when a user types in a number it appears with a dollar sign next to, or inside it. I'm finding this impossible currently. In a standard input I'd put the before or in a span or label preceding the input in order to make it work.

However with the Ion-item in an Ion-list it seems that adding a span breaks it, and I'm not sure how, using scss, to add it after. Head exploding stuff.

I've tried:

ion-label[sale]:before {
    content: "$";
}

On a whim, in hopes that would work. It does not.

Anyone experience this before and have a solution?

Thanks

Answer 1

Interesting question. The following should work because in practice I believe an <ion-input> gets translated to a standard HTML5 input in the DOM.

input[type=number]:before {
    content: "$";
}