Is anyone else experiencing difficulty displaying a FormControl on a form to hold a telephone country code prefix with a plus sign always visible in the left-padding area? I attempted to use a :before element on the input, but even after inspecting in DevTools, I couldn't get it to appear. In my desperation, I tried applying the :before element to all inputs, yet still no luck. Interestingly, the styles for the main input element are functioning as expected.
The same issue is present when using :after.
My question is - has anyone successfully used a :before or :after element in this scenario? Is this a known limitation of ReactiveForms or potentially a bug?
css
input[name="telCountryCode"]:before {
content: '+';
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 1rem;
height: 1rem;
}
ts
this.form = this.fb.group({
telCountryCode: '',
telNumber: '',
});