HTML text input field with currency symbol

HTML text input field with currency symbol

I would like to have a text input field containing the "$" sign in the very beginning, and no matter what editing occurs to the field, for the sign to be persistent.

I would be good if only numbers were accepted for input but that's just a fancy addition.

Thank you very much in advance!

Answer by Quentin for HTML text input field with currency symbol

 $  

See also: Restricting input to textbox: allowing only numbers and decimal point

Answer by dnagirl for HTML text input field with currency symbol

Put the '$' in front of the text input field, instead of inside it. It makes validation for numeric data a lot easier because you don't have to parse out the '$' after submit.

You can, with JQuery.validate() (or other), add some client-side validation rules that handle currency. That would allow you to have the '$' inside the input field. But you still have to do server-side validation for security and that puts you back in the position of having to remove the '$'.

Answer by BalusC for HTML text input field with currency symbol

Consider simulating an input field with a fixed prefix or suffix using a span with a border around a borderless input field. Here's a basic kickoff example:

$  

with

.currencyinput {      border: 1px inset #ccc;  }  .currencyinput input {      border: 0;  }  

Answer by Sam Tuke for HTML text input field with currency symbol

Another solution which I prefer is to use an additional input element for an image of the currency symbol. Here's an example using an image of a magnifying glass within a search text field:

html:

css:

#search input[type="image"] {  background-color: transparent;  border: 0 none;  margin-top: 10px;  vertical-align: middle;  margin: 5px 0 0 5px;  position: absolute;  }  

This results in the input on the left sidebar here:

https://fsfe.org

Answer by rybo111 for HTML text input field with currency symbol

Place the symbol and text input in a containing div.

      ?        
  

Centre the symbol vertically with transform and top. Set pointer-events to none, so that clicks focus on the input. Finally, adjust the input's text-indent:

.input-symbol{    position:relative;  }  .input-symbol span{    position: absolute;    transform: translate(0,-50%);    top:50%;    pointer-events:none;    margin-left:0.2em;  }  .input-symbol input{    text-indent:1em;  }  

Unlike the accepted answer, this will retain input validation highlighting, such as a red border when there's an error.

As you can see from these JSFiddle examples, you can use various font sizes and input heights, too.

Answer by Sebastian for HTML text input field with currency symbol

If you only need to support Safari, you can do it like this:

input.currency:before {    content: attr(data-symbol);    float: left;    color: #aaa;  }  

and an input field like

This way you don't need an extra tag and keep the symbol information in the markup.

Answer by muffls for HTML text input field with currency symbol

You can wrap your input field into a span, which you position:relative;. Then you add with :before content:"?" your currency symbol and make it position:absolute. Working JSFiddle

HTML

CSS

.input-symbol-euro {      position: relative;  }  .input-symbol-euro input {      padding-left:18px;  }  .input-symbol-euro:before {      position: absolute;      top: 0;      content:"?";      left: 5px;  }  

Update If you want to put the euro symbol either on the left or the right side of the text box. Working JSFiddle

HTML

CSS

 .input-euro {       position: relative;   }   .input-euro.left input {       padding-left:18px;   }   .input-euro.right input {       padding-right:18px;       text-align:end;    }     .input-euro:before {       position: absolute;       top: 0;       content:"?";   }   .input-euro.left:before {       left: 5px;   }   .input-euro.right:before {       right: 5px;   }  

Answer by Jeff Callahan for HTML text input field with currency symbol

Since you can't do ::before with content: '$' on inputs and adding an absolutely positioned element adds extra html - I like do to a background SVG inline css.

It goes something like this:

input {      width: 85px;      background-image: url("data:image/svg+xml;utf8,");      padding-left: 12px;  }  

It outputs the following:

Note: the code must all be on a single line. Support is pretty good in modern browsers, but be sure to test.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 71