HTML text input field with currency symbol

Question

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

User · Answer

For bootstrap its works   lt span class  form-control  gt    lt input type  text   gt  lt  span gt    Don t use class  form-control  in input field

User · Answer

Try This  x000D   x000D   lt label style  position  relative  left 15px   gt   lt  label gt   lt input type  text  style  text-indent  15px   gt  x000D   x000D   x000D

User · Answer

I just used  before with the input and passed   as the content   input      margin-left  20px     input before     content         position  absolute

User · Answer

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

User · Answer

Use a parent  input-icon div  Optionally add  input-icon-right    lt div class  input-icon  gt     lt input type  text  gt     lt i gt   lt  i gt   lt  div gt    lt div class  input-icon input-icon-right  gt     lt input type  text  gt     lt i gt     lt  i gt   lt  div gt    Align the icon vertically with transform and top  and set pointer-events to none so that clicks focus on the input  Adjust the padding and width as appropriate    input-icon     position  relative      input-icon  gt  i     position  absolute    display  block    transform  translate 0  -50      top  50     pointer-events  none    width  25px    text-align  center    font-style  normal      input-icon  gt  input     padding-left  25px    padding-right  0      input-icon-right  gt  i     right  0      input-icon-right  gt  input     padding-left  0    padding-right  25px    text-align  right      Unlike the accepted answer  this will retain input validation highlighting  such as a red border when there s an error   JSFiddle usage example with Bootstrap and Font Awesome

User · Answer

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    lt input type  image  alt  Subscribe  src   graphics icons search-button png  gt   lt input type  text  placeholder  Search  name  query  gt    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

User · Answer

Yes  if you are using bootstrap  this would work    form-control input       border  none      padding-left  4px      and   lt span class  form-control  gt    lt input type  text   gt  lt  span gt

User · Answer

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    lt input class  currency  data-symbol       type  number  value  12 9  gt   This way you don t need an extra tag and keep the symbol information in the markup

User · Answer

x000D   x000D   lt style gt  x000D   currencyinput   x000D      border  1px inset  ccc  x000D       x000D      border-left none  x000D    x000D   currencyinput input   x000D      border  0  x000D    x000D   lt  style gt  x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt input type  text  oninput  this value   this value replace    0-9   g       this value   this value replace           g    1     style  text-align right border-right none outline none  name  currency  gt  lt span class  currencyinput  gt   lt  span gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

lt input name  currency  gt    See also  Restricting input to textbox  allowing only numbers and decimal point

User · Answer

currencyinput       border  1px inset  ccc       border-left none     currencyinput input       border  0  enter code here      lt input type  text  oninput  this value   this value replace    0-9   g       this value   this value replace           g    1     style  text-align right border-right none outline none  name  currency  gt  lt span class  currencyinput  gt   lt  span gt

User · Answer

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   lt span class  input-symbol-euro  gt       lt input type  text    gt   lt  span gt    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   lt span class  input-euro left  gt       lt input type  text    gt   lt  span gt   lt span class  input-euro right  gt       lt input type  text    gt   lt  span gt    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

User · Answer

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  lt svg xmlns  http   www w3 org 2000 svg  version  1 1  height  16px  width  85px  gt  lt text x  2  y  13  fill  gray  font-size  12  font-family  arial  gt   lt  text gt  lt  svg gt         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

User · Answer

I ended up needing the type to still remain as a number  so used CSS to push the dollar sign into the input field using an absolute position    x000D   x000D   lt div gt  x000D      lt span style  position  absolute  margin-left  1px  margin-top  1px   gt   lt  span gt  x000D      lt input type  number  style  padding-left  8px   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

None of these answers really help if you are concerned with aligning the left border with other text fields on an input form   I d recommend positioning the dollar sign absolutely to the left about -10px or left 5px  depending whether you want it inside or outside the input box   The inside solution requires direction rtl on the input css   You could also add padding to the input to avoid the direction rtl  but that will alter the width of the input container to not match the other containers of the same width    lt div style  display inline-block  gt    lt div style  position relative  gt     lt div style  position absolute  left -10px   gt   lt  div gt    lt  div gt    lt input type  text    gt   lt  div gt    or   lt div style  display inline-block  gt    lt div style  position relative  gt     lt div style  position absolute  left 5px   gt   lt  div gt    lt  div gt    lt input type  text  style  direction  rtl     gt   lt  div gt    https   i imgur com ajrU0T9 png  Example  https   plnkr co edit yshyuRMd06K1cuN9tFDv p preview

User · Answer

x000D   x000D   currencyinput   x000D      border  1px inset  ccc  x000D      padding-bottom  1px   FOR IE  amp  Chrome x000D    x000D   currencyinput input   x000D      border  0  x000D    x000D   lt span class  currencyinput  gt   lt input type  text  name  currency  gt  lt  span gt  x000D   x000D   x000D

User · Answer

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    x000D   x000D   currencyinput   x000D      border  1px inset  ccc  x000D    x000D   currencyinput input   x000D      border  0  x000D    x000D   lt span class  currencyinput  gt   lt input type  text  name  currency  gt  lt  span gt  x000D   x000D   x000D

[html] HTML text input field with currency symbol

Examples related to html

Examples related to text

Examples related to field

Examples related to currency

Examples related to persistent