I search for an hour now to find a help file or discussion here how to add a % or ‘kWh’ after the number in the number field., but could not find it anymore.. Anyone?
Its something like:
.class-name:after {
content:'kWh'
}
but the text is below the number field. what I try with marges, it does not work.
Do you have a visual of what you’re after? Do you want it to appear inline with whatever is entered in the field or just inside the input aligned to the right?
Hi David,
its on accept site so I cannot share URl yet.
the calculated fiueld has a css selector: ‘calculation_kWh’
when doing an ::after correct like
.calculation_kWh::after
its shown not after
Now I add a space like: .calculation_kWh ::after
Now its shown in the right place but it doubles now: its also in the sentence above the field…
Should I use another class id just for the number field?
the css:
.calculation_kWh input {
margin-top: 15px;
font-size: 20px;
background-color: #f5e9d2 !important;
border: 0.9px solid !important;
border-radius: 4px;
border-color: #181a19;
padding: 10px !important;
font-size: 1em !important;
}
.calculation_kWh::after {
content:'kWh';
font-size: 1em;
margin-left: -80px;
color: black;
}
Hi Keesjan,
Could you please share your webpage URL so we can take a closer look and assist you?
Looks like you’re pretty close here! Try tweaking this bit to:
.calculation_kWh .ginput_container::after {
content:'kWh';
font-size: 1em;
margin-left: -80px;
color: black;
}
This should scope that text to only show up after the input.
yes @david that did the trick! Still learning…
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.