# Add a pretty $ to currency form fields
**URL:** https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961
**Category:** Show & Tell
**Created:** [March 12, 2015, 4:46pm UTC](https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961 "2015-03-12T16:46:51Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@BenjaminCo36938](https://forums.knack.com/u/BenjaminCo36938)
#### Post date: [March 12, 2015, 4:46pm UTC](https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961/1 "2015-03-12T16:46:51Z")
I had always admired the option in the Bootstrap framework to prepend currency based form fields with the dollar sign. Knack does a good job of formatting it when you are displaying the value, but it's not included in the form input version.
**This is the output goal:**
**Here is how to do it:**
First the javascript:
```
$('.kn-input-currency .input').each(function() {
$(this).prepend('$');
});
```
Because knack wraps currency fields nicely, we can apply this across the board.
And here is the CSS I used to make it pretty:
```
/* remove the border radius on the left side of currency fields */
.kn-input-currency input[type=text] {
border-radius: 0 3px 3px 0 !important;
-webkit-border-radius: 0 3px 3px 0 !important;
}
/\* format the dollar sign prepend \*/
.kn-input-currency span.currency {
display: inline-block;
border: 1px solid #bbb;
padding: 3px 8px;
line-height: 20px;
margin-right: -5px;
border-radius: 3px 0 0 3px !important;
-webkit-border-radius: 3px 0 0 3px !important;
}
/\* I added this for general feng shui because the form value is close to the edge and sticks out especially when the dollar sign is there \*/
.kn-input input[type=text] {
padding-left: 6px; !important;
}
```
Pretty simple, but creates a nice effect and reminds users that they are entering currency and not a normal number value and prevents them from trying to include the $ in the actual value.
---
### Author:  [@BenjaminCo36938](https://forums.knack.com/u/BenjaminCo36938)
#### Post date: [April 2, 2015, 9:03pm UTC](https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961/2 "2015-04-02T21:03:20Z")
Great to hear it, Michael. I think it would be a great idea to have them add a class to the div.input that says what type of currency it is then it would be super easy.
---
### Author:  [@MichaelImp73688](https://forums.knack.com/u/MichaelImp73688)
#### Post date: [April 2, 2015, 2:46pm UTC](https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961/3 "2015-04-02T14:46:12Z")
Works beautifully, thanks!
I've now got to work out how to change the symbol based on a 'currency' field: USD, EUR, GBP, etc. I might mine Nic's Git repository for inspiration :-)
---
### Author:  [@BenjaminCo36938](https://forums.knack.com/u/BenjaminCo36938)
#### Post date: [April 2, 2015, 12:48pm UTC](https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961/4 "2015-04-02T12:48:25Z")
Michael, after refreshing a couple times I was able to replicate your problem. I believe this version fixes it because it will only add it if it's not already there:
```
// Add dolar signs to currency fields
$('.kn-input-currency .input').each(function() {
if ($(this).find('span.currency').length < 1) {
$(this).prepend('$');
}
});
```
Let me know if that fixes your issue - thanks!
---
### Author:  [@MichaelImp73688](https://forums.knack.com/u/MichaelImp73688)
#### Post date: [April 2, 2015, 8:33am UTC](https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961/5 "2015-04-02T08:33:47Z")
When I use the .any version, I get a duplicate symbol "$$". I assume that's because it's being called twice (perhaps once for the view and once for the field)? Do you know of a way round the duplication which can still work for the whole app? I'd rather not specify the views individually.
---
### Author:  [@MichaelImp73688](https://forums.knack.com/u/MichaelImp73688)
#### Post date: [March 25, 2015, 11:11pm UTC](https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961/6 "2015-03-25T23:11:27Z")
Thanks Benjamin.
---
### Author:  [@BenjaminCo36938](https://forums.knack.com/u/BenjaminCo36938)
#### Post date: [March 23, 2015, 10:25pm UTC](https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961/7 "2015-03-23T22:25:59Z")
Michael, thank you. I should have mentioned this and will adjust the original post if I am allowed. But for this to work, it needs to use one of the Knack javascript event calls. If you want it to work everywhere, simply wrap the javascript above in this:
```
$(document).on('knack-view-render.any', function(event, view, data) {
...
});
```
If you want it to only render on a specific view, you can change "any" to "view\_#" where # is the number of the view. You can find this in the source or easily by looking at the URL in the backend builder. Let me know if this answers your question!
---
### Author:  [@MichaelImp73688](https://forums.knack.com/u/MichaelImp73688)
#### Post date: [March 20, 2015, 5:31pm UTC](https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961/8 "2015-03-20T17:31:29Z")
Looks great in your example. I can't get it to work: do I need to top and tail the javascript (and/or css) to make it work across the site?
---
### Author:  [@BenjaminCo36938](https://forums.knack.com/u/BenjaminCo36938)
#### Post date: [March 12, 2015, 5:02pm UTC](https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961/9 "2015-03-12T17:02:05Z")
A small addendum - in order to get this to display nicely on mobile device-sized screens, add this to the CSS:
```
/* for the mobile size mods */
@media screen and (max-width: 500px) {
.kn-input-currency span.currency {
float: left;
margin-right: -1px;
line-height: 24px;
}
.kn-view form .kn-input-currency input[type=text] {
width: 90% !important;
}
}
```
---
### Author:  [@GaryStark10384](https://forums.knack.com/u/GaryStark10384)
#### Post date: [June 2, 2022, 5:16pm UTC](https://forums.knack.com/t/add-a-pretty-to-currency-form-fields/7961/10 "2022-06-02T17:16:34Z")
> [@BenjaminCo36938](#):
>
> /\* remove the border radius on the left side of currency fields \*/ .kn-input-currency input[type=text] { border-radius: 0 3px 3px 0 !important; -webkit-border-radius: 0 3px 3px 0 !important; }
>
> /\* format the dollar sign prepend \*/
> .kn-input-currency span.currency {
> display: inline-block;
> border: 1px solid #bbb;
> padding: 3px 8px;
> line-height: 20px;
> margin-right: -5px;
> border-radius: 3px 0 0 3px !important;
> -webkit-border-radius: 3px 0 0 3px !important;
> }
Benjamin, thank you SO much for this post. For some reason it’s not working for me. Below is the EXACT (copied and pasted) code I have in my app. Any way you can let me know what I’m doing wrong?
JS:
// Currency formatting
$(‘.kn-input-currency .input’).each(function() {
$(this).prepend(‘$’);
});
CSS:
/\* Currency Formatting remove the border radius on the left side of currency fields _/
.kn-input-currency input[type=text] {
border-radius: 0 3px 3px 0 !important;
-webkit-border-radius: 0 3px 3px 0 !important;
}
/_ format the dollar sign prepend \*/
.kn-input-currency span.currency {
display: inline-block;
border: 1px solid #bbb;
padding: 3px 8px;
line-height: 20px;
margin-right: -5px;
border-radius: 3px 0 0 3px !important;
-webkit-border-radius: 3px 0 0 3px !important;
}