Include currency symbol in input when padding is already set

Question

I want to include a currency symbol inside a HTML text input (rather than preceding it, so as to maintain alignment of boxes down a form). I'd prefer it to remain as it is filled in, so not use placeholder. Clearly I can put the input in a div and include the symbol positioned absolute, either as an explicit element, or using ::before on the div, with some extra padding-left in the input to allow space for the symbol.

However, I don't have control over the padding. For example, many WordPress themes where the form would commonly be embedded, already include padding in their inputs as part of their look and feel. If I change the padding-left, it will override the default, not add to it, leading to mis-alignment in forms. What I really need is additional padding.

I guess I could include a couple of spaces as the value of the input (and trim the result on receipt), so when they click and type it looks OK, but they may delete those, so not a very satisfactory solution.

I could also use JavaScript to adjust the padding, but it would be preferable if this could be static (and it doesn't play terribly well with Back either).

A background image doesn't help; it has the same problem (and in any case, the symbol varies, so it needs to be text).

Any other thoughts about how I might do this in CSS?

Answer 1

can you write a more specific CSS selector?

For example if you are using Wordpress, you will probably have a class attached to the body that you can use. That way you can limit the application of that css to that specific page only.

If you have for example 5 input fields that are of type text but no specific class on it you can use:

:nth-child() selector to select for example only a specific element.

Example are here: https://www.w3schools.com/cssref/sel_nth-child.asp.

Does that help you?