Insert the dollar sign into a box for entering text

Is there a way to keep the dollar symbol at the beginning of a text box consistently across different browsers? The current code achieves this but with some issues in Firefox. How can I resolve this problem and improve the alignment of the dollar symbol using CSS?

.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/

htmlcssinputpseudo-element

Answer №1

It seems like there is a lot of unnecessary code in your provided example.

Below is a simplified version that has been tested on Chrome, Firefox, and IE (not verified 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 method used for vertical centering with the pseudo-element:

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

Answer №2

The main cause of this issue is due to the fact that the span element is inline and its positioning may not be as expected. To rectify this, a quick fix would be to apply display: block to the 

<span class="input-symbol-dollar">

To achieve a more organized layout, you can also make the symbol display as a block element with a height matching the input's height, setting the line-height accordingly. I have adjusted your fiddle, but below is the relevant code snippet:

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 simply convert the span into a div, as a div is inherently a block-level element. The styling adjustments would still apply in this scenario.

Answer №3

Consider using a span within a 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>

Answer №4

.custom-text{
border: 2px solid #DDD;
width: 100%;
padding: 5px;
}
<div class="custom-text">
    <span>$</span>
    <input style="border: none;"/>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to dynamically adjust the size of a table or div when clicking in Angular 2?

Is there a way to dynamically resize a table or div in Angular 2 by clicking on a button or other element? I am attempting to change the width of a table from 300px to 100px using a function that utilizes CSS and TypeScript. table{ width: 300px; res ...

csstypescripthtml-tableangular2-template

Tips for extracting data from an Angular object using the *ngFor directive

https://i.stack.imgur.com/ai7g1.png The JSON structure displayed in the image above is what I am working with. My goal is to extract the value associated with the key name. This is the approach I have taken so far: <span *ngFor="let outlet of pr ...

htmlnode.jsangulartypescript

JavaScript | Calculating total and separate scores by moving one div onto another div

I have a fun project in progress involving HTML and Javascript. It's a virtual zoo where you can drag and drop different animals into their designated cages. As you move the animals, the total count of animals in the zoo updates automatically with the ...

javascripthtmlcountdrag-and-dropdrop

What could be causing the drop-down menu to function properly when offline but not when accessed on the server?

When visiting the website here and clicking on the contact link, you should see a Google map. However, for some unknown reason, it does not display. The strange part is that when I open the contact.html file directly, the map works perfectly fine. It seem ...

javajqueryhtmlcssbootstrap-4

Displaying items in the shopping cart across two separate columns

I have a website located at Within that page, I have included the Cart table using a woocommerce shortcode. Currently, the cart table is positioned below the billing details and payment options section. My goal is to move this cart table to be situated ...

csswordpresswoocommercecheckout

What are the steps to set up i18next in my HTML?

I have a project using nodejs, express, and HTML on the client side. I am looking to localize my application by incorporating i18next. So far, I have successfully implemented i18next on the nodejs side by requiring it and setting it up. var i18n = require ...

htmlnode.jsexpressinternationalizationi18next

The slidedown feature is not functioning as initially planned

As a beginner in HTML, jQuery, and CSS, I am attempting to create a navigation bar that will trigger a jQuery slidedown effect when clicked. Unfortunately, my current code is not producing the desired outcome. Below is a snippet of what I have implemente ...

jqueryhtmlcss

Utilize the ng-controller directive with unique aliases across various sections of HTML code

I'm facing an issue with my ng-controllers when multiple controllers are used on the same page. For instance, I have one controller in the page header, another in a different section of the same page, and one in the content of the page. However, all o ...

javascripthtmlangularjsangularjs-service

Combining onClick and a href within a single sentence: How can I effectively utilize both onClick

Currently, I have implemented the following code for a sliding menu bar. However, I am facing an issue where upon clicking on a href link, I want the ".gs-hamburger" function to slide up the menu bar after redirecting to the page. <nav class="gs-nav- ...

jqueryhtml

Incorporating Event Listeners for Controlling Playback and Navigation in HTML5 Video

I am trying to integrate an HTML5 video into my website to demonstrate how a product works. Each time a user clicks on an image, I want the video to skip to a specific time and then pause at another predefined time. However, the code I have implemented so ...

javascripthtmlvideoaddeventlistener

Unable to toggle visibility of image

I integrated the jquery.smoothZoom.min.js plugin for zooming and panning images successfully in my project. Now, I am attempting to create a carousel functionality (<,>.i.e. corousal) to use it with multiple images. However, when I added the correspo ...

javascriptjqueryhtmlzooming

Having trouble getting the equirectangular panorama example from Three.js to work on your device even though WebGL is supported?

After examining the WebGL equirectangular panorama example, it performs well on both desktop and mobile devices (such as the Samsung S4 Android 4.4.2) using the latest version of mobile Chrome. However, when tested on the Samsung tablet SM-T230 also runni ...

javascriptandroidhtmlmobilethree.js

Scrapy and Python data gets corrupted by <br> tags causing issues

As I attempt to extract the text from Amazon reviews using scrapy, I encounter an issue. Reviews with multiple lines have their text separated by "< br >" tags within a span element. So, when I try to scrape the first review, I use this line of code: ...

pythonhtmlweb-scraping

Encountering a Blank Area at the Top of a Printed AngularJS Screen

Currently, I am tackling an issue in AngularJS while working on the Print Invoice Page. The problem I am encountering is a blank space at the top of the printed screen. Check out the image here Below is my code: HTML <div id="invoice" class="compact ...

javascripthtmlcssangularjs

turning every input field's border to red if none of them were filled out at least once

I struggle with javascript and need some help. I have a form with multiple input fields, and I want to ensure that the user fills in at least one of them. I found code that triggers an alert message if the user does not fill in any fields, but I would pref ...

javascriptjqueryhtmlcss

Setting up automatic CSS linting in a Vue.js project for seamless correction

Is there a way to enforce linting on the <style> segment within a .vue file while coding? I have set up eslint (with airbnb ruleset)+prettier for the <template> and <script> sections, which includes some auto-correction upon saving, but I ...

cssvue.js

Selenium Mouse/Pointer Display

Is there a way to visualize the selenium mouse movements during test execution? Can we display a windows cursor image or any kind of indicator like a dot or crosshair? I am currently working on implementing a drag and drop feature using Selenium and Java ...

javahtmltestingselenium

Designing a dynamic left navigation column with collapsible features

I'm currently exploring ways to integrate this style of sidebar navigation with the layout from my JSfiddle. In the first example, the sidebar collapses to the main icons, but the use of the Nav tag is causing it to slide under the content instead of ...

jquerycsstwitter-bootstrapmenu

What steps can I take to stop a select box within a flex container from shrinking?

Currently working on some code that involves a flex container. Struggling to prevent fields from shrinking too much on smaller screen sizes. var crsdesc; //var for new window function popup(mylink) { if (!window.focus) return true; var href; if (t ...

htmlcssflexbox

When attempting to modify styles in IE10, I consistently encounter an error message stating "Unable to evaluate expression."

Below is a JavaScript function I have created to hide an HTML tag: function hideObject(objectId) { var obj = document.getElementById(objectId); if (obj) { obj.style.display = "none"; } } I encountered a strange issue when using this ...

javascripthtmlinternet-explorercross-browser