#teeluxiii
solar frost
wanton idol
Hello! I don't think that can be removed, no, but let me confirm...
pine pivot
I've tried setting the default value to '', null and undefined but no luck
wanton idol
While I'm looking can you tell me why you would want to remove it? That would prevent people from entering in phone numbers with different country codes.
pine pivot
Just from a UX perspective, some users think that phone number is pre-populated already and dont think to add one
wanton idol
Wait, to clarify, you're trying to get rid of the text "phone number" above the field there? Or something else?
wanton idol
Oh, gotcha.
You could use the Appearance API to set the opacity of the placeholder to 0: https://stripe.com/docs/elements/appearance-api
pine pivot
hmmm okay let me see if that works
Do you mean like this? the documentation mentions not to use p-
'.p-PhoneInput::placeholder': {
opacity: '0',
},
it also says opacity is for Labels?
The above screenshot has the class, p-Input-input Input p-PhoneInput...
wanton idol
Yeah, that's not how the appearance API works. You only get a subset of selectors.
pine pivot
if i use
'.Input::placeholder': {
opacity: '0',
},
that also doesn't work
wanton idol
Try making 0 not a string.
pine pivot
No luck 😦
wanton idol
Try changing it to a color to see if the selector is working.
pine pivot
'.Input::placeholder': {
color: '#fff',
},
This does work, but now all the placeholders are hidden with the background
I just wanted to modify the phone number input
wanton idol
I'm not sure you can target just the phone number input's placeholder, you would need to modify all of them.
pine pivot
Understandable, i'll see if theres any way i can override the css but good to know its not something I missed from the API