🚀 Interactive CSS Basics course for designers and non-coders: www.cssgamelab.com/ 👉 Get 20% off using the code VELVET20OFF at Checkout. 💻 Grab the CSS code for free here: www.velvetmade.com/2024/02/19/css-codes-for-elementor-tutorials/
Hi there, I don't know if you still check this comment section, but I lose nothing trying haha. I tried using the selectors you used on your video but they don't work for me. It does work when I use the .elementor-field-type-upload input[type="file"] selector but it takes the button and the label as a whole. I found in other website the .elementor-upload-field selector which allows me to style only the label but not the button. I tried using the plugin you recommended and the CSS Custom Code section of my widget.
Hi! Can you send over the entire code you are using for the .elementor-field-type-upload input[type="file"] class? And the Elementor version you are using? If you have a link to the website where I can examine this in Inspect Elements, that would be the best - you could send me an email
Try this selector .upload-form .elementor-field-type-upload input[type="file"]::-webkit-file-upload-button instead of this .upload-form .elementor-field-type-upload input[type="file"]::file-selector-button In fact use both, if the one doesn't work it will be ignored.
Hi! Can you share more about the code that you are using and what's not working? Otherwise I won't be able to assist you. You can also send screenshots or a link to my email and I'll take a look
Hi! A more detailed video on customizing the text for the button and the 'No file chosen' label will be released tomorrow, but if you want to change the color, use this code (don't forget to change the upload-form class to whatever you named your form class): .upload-form .elementor-field-type-upload input[type="file"]{ color: red !important; } If you want to hide the 'No file chosen' label: .upload-form .elementor-field-type-upload input[type="file"]{ font-size: 0px !important; } Hope that helps!
🚀 Interactive CSS Basics course for designers and non-coders:
www.cssgamelab.com/
👉 Get 20% off using the code VELVET20OFF at Checkout.
💻 Grab the CSS code for free here:
www.velvetmade.com/2024/02/19/css-codes-for-elementor-tutorials/
Do you also have a option to add a hover with the css code?
Hi there, I don't know if you still check this comment section, but I lose nothing trying haha.
I tried using the selectors you used on your video but they don't work for me. It does work when I use the .elementor-field-type-upload input[type="file"] selector but it takes the button and the label as a whole.
I found in other website the .elementor-upload-field selector which allows me to style only the label but not the button.
I tried using the plugin you recommended and the CSS Custom Code section of my widget.
Hi! Can you send over the entire code you are using for the .elementor-field-type-upload input[type="file"] class? And the Elementor version you are using? If you have a link to the website where I can examine this in Inspect Elements, that would be the best - you could send me an email
loved the tutorial is there a way we can change the No file chosen text to the text of our own choosing
A video on this should be released tomorrow on my channel - working on it, so stay tuned! :)
tyvm much appreciated
You can check the video tutorial on my channel now - here is the link!
th-cam.com/video/R7pToB2KJf8/w-d-xo.html
Thank you!
You're welcome! :)
Hi, I have followed all the steps exactly but unfortunately it does not work. Can you help me further
Hi, can you provide a link so that I can take a look?
Feel free to send an email with the details :)
Try this selector
.upload-form .elementor-field-type-upload input[type="file"]::-webkit-file-upload-button
instead of this
.upload-form .elementor-field-type-upload input[type="file"]::file-selector-button
In fact use both, if the one doesn't work it will be ignored.
thank you
You're welcome!
not work
Hi! Can you share more about the code that you are using and what's not working? Otherwise I won't be able to assist you. You can also send screenshots or a link to my email and I'll take a look
Hi. Can I also change the color of the text or hide the text No file chosen? The text next to the button
Hi! A more detailed video on customizing the text for the button and the 'No file chosen' label will be released tomorrow, but if you want to change the color, use this code (don't forget to change the upload-form class to whatever you named your form class):
.upload-form .elementor-field-type-upload input[type="file"]{
color: red !important;
}
If you want to hide the 'No file chosen' label:
.upload-form .elementor-field-type-upload input[type="file"]{
font-size: 0px !important;
}
Hope that helps!
@@cssexpresstutorials Great. Thank you. And if you can also add a download icon, then it will be incomparable.
You mean to add a download icon in the button itself with the text 'Upload file'? @@jjes.studio
@@cssexpresstutorials Yes. If possible. before and after the button text. both options
Noted - the video is on the way! @@jjes.studio