Place dollar symbol inside a text input

Question

I want to keep dollar symbol at beginning of text box. I am able to achieve this using the below code.

It works find in chrome and IE. The dollar symbol goes and sits next to label in firefox. How do i fix this problem? And for aligning the dollar symbol inline with text i use top 2px. Is there a way to better the css code.

.input-symbol-dollar:after {
  color: #37424a !important;
  content: "$";
  font-size: 16px !important;
  font-weight: 400;
  left: 10px;
  position: absolute;
  top: 2px;
}

.input-symbol-dollar {
  position: relative;
}

.abc-input {
  border: 2px solid #c9c9c9;
  box-shadow: none;
  color: #6b6f72;
  font-size: 0.9375rem;
  text-transform: none;
  width: 100%;
  color: #37424a !important;
  font-family: "Roboto Regular", sans-serif;
  font-size: 16px !important;
  font-weight: 400;
  height: 42px !important;
  padding-left: 17px !important;
  display: inline-block !important;
}

label {
  color: #37424a;
  display: inline-block;
  font-family: "Roboto Bold", sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

<label for="abcInput" class="abc-label">lable filed </label>
<span class="input-symbol-dollar">
<input  type="text" id="abcInput" tabindex="0" name="abc" class="abc-input "  placeholder="0.00"></span>

https://jsfiddle.net/8jdek3zt/5/

Michael Benjamin · Answer 1 · 2017-07-21T19:52:30.733

3

It looks like there's a lot of unnecessary code in your example.

Here's a simplified version that works on Chrome, Firefox and IE (not tested in Safari).

span {
  display: inline-block;
  position: relative;
}

input {
  border: 2px solid #c9c9c9;
  box-shadow: none;
  font-family: "Roboto Regular", sans-serif;
  font-size: 1.5em;
  height: 42px;
  padding-left: 20px;
}

span::before {
  content: "$";
  font-family: "Roboto Regular", sans-serif;
  font-size: 1.5em;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

<span>
<input placeholder="0.00">
</span>

Here's an explanation of the vertical centering method for the pseudo-element:

Element will not stay centered, especially when re-sizing screen

edited Jul 21 '17 at 19:52

answered Jul 21 '17 at 19:01

Michael Benjamin

346,931
104
581
701

Top 50% will push element 50% down and translatey -50% will pull up the element by 50% right? It should come to same position right? – Hacker Jul 21 '17 at 19:43
`top` is pushing the element down 50% of the length of the container. `translateY` is pullling the element up 50% of its width. This makes it perfectly centered. – Michael Benjamin Jul 21 '17 at 19:50
Here's a complete explanation: https://stackoverflow.com/q/36817249/3597276 – Michael Benjamin Jul 21 '17 at 19:51

hidanielle · Accepted Answer · 2017-07-21T18:56:32.430

The reason why this is happening is because the span is an inline element, so it's positioning isn't calculated as you are expecting it to be. The easiest solution would be to set display: block on the <span class="input-symbol-dollar">

As for positioning it in a cleaner way, you could consider making the symbol display block as well, with a height 100% of the input and set the line-height equal to the input height. I've updated your fiddle but the relevant code is below:

https://jsfiddle.net/chzk1qgm/1/

.input-symbol-dollar {
  position: relative;
  display: block;
}
.input-symbol-dollar:after {
    color: #37424a !important;
    content: "$";
    font-size: 16px !important;
    font-weight: 400;
    position: absolute;

    display: block;
    height: 100%;
    top: 0;
    left: 10px;
    line-height: 46px; // height of input + 4px for input border
}

Alternatively, you could just change the span to a div, as a div is a block level element by default. The rest of the styles would remain the same though.

But the $ symbol and text input are mis alligned. $ is little up of the text. Adjusting the top is only the fix for this? — Hacker, Jul 21 '17 at 18:53
Ah, it's misaligned because the `line-height: 42px` should actually be 46px, to account for the 4px added to the input due to the border — hidanielle, Jul 21 '17 at 18:55

score 0 · Answer 3 · answered Jul 21 '17 at 18:44

try putting span in div.

<label for="abcInput" class="abc-label">lable filed </label>
<div>
    <span class="input-symbol-dollar">
        <input  type="text" id="abcInput" tabindex="0" name="abc" class="abc-input "  placeholder="0.000">
    </span>
</div>

Muhammad · Answer 4 · 2017-07-21T19:16:25.757

0

.custom-text{
border: 2px solid #DDD;
width: 100%;
padding: 5px;
}

<div class="custom-text">
    <span>$</span>
    <input style="border: none;"/>
</div>

edited Jul 21 '17 at 19:16

answered Jul 21 '17 at 18:59

Muhammad

6,725
5
47
54

Place dollar symbol inside a text input

4 Answers4