Money Symbol Before Input Field

me

melvins138 02 May, 2017

Hello,

I would like to place a "$" symbol before a Text Box.

Is this possible without using a Custom Code form type?

Thanks,
Melvins138

Gr

GreyHead 03 May, 2017

HI Melvins138,

I think that you can probably do this using the CSS 'content' property; Bootstrap also has some styles that let you show prefix and suffix tags on inputs - but I think that they need custom html

Bob

me

melvins138 03 May, 2017

Answer

Thanks Bob,

I had been trying CSS, with no luck. After a little more research and testing on jsfiddle, I think I have it figured out.

For anyone else wanting to do this, here is the solution for ChronoformV5 (I haven't tested on 4 or 6 yet, but I'm sure it similar)

1) Create a Load CSS
2) Take your Field ID, and use this CSS (In my case it was "donationamount")

#fin-donationamount {
     position: relative;
}

#fin-donationamount input {
    height:20px;
    margin-left:10px;
 }
 #fin-donationamount::before {
     position: absolute;
     content:"$";
     top:5px;
 }

That's it. Very Simple.

Here is a JSFiddle of it in action.

Thanks,
Melvins138

Forums

Money Symbol Before Input Field