Style the file upload button in Elementor forms and CSS | How to make the 'Choose file' button nicer

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 พ.ย. 2024

ความคิดเห็น • 27

  • @cssexpresstutorials
    @cssexpresstutorials  10 หลายเดือนก่อน

    🚀 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/

  • @vinodsital5419
    @vinodsital5419 หลายเดือนก่อน

    Do you also have a option to add a hover with the css code?

  • @gruporeme8788
    @gruporeme8788 หลายเดือนก่อน +1

    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.

    • @cssexpresstutorials
      @cssexpresstutorials  หลายเดือนก่อน

      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

  • @rehmankureshi
    @rehmankureshi 10 หลายเดือนก่อน +1

    loved the tutorial is there a way we can change the No file chosen text to the text of our own choosing

    • @cssexpresstutorials
      @cssexpresstutorials  10 หลายเดือนก่อน +1

      A video on this should be released tomorrow on my channel - working on it, so stay tuned! :)

    • @rehmankureshi
      @rehmankureshi 10 หลายเดือนก่อน

      tyvm much appreciated

    • @cssexpresstutorials
      @cssexpresstutorials  10 หลายเดือนก่อน

      You can check the video tutorial on my channel now - here is the link!
      th-cam.com/video/R7pToB2KJf8/w-d-xo.html

  • @JoshuaGuillano
    @JoshuaGuillano 10 หลายเดือนก่อน +1

    Thank you!

  • @mehditavangarranjbar4357
    @mehditavangarranjbar4357 9 หลายเดือนก่อน +1

    Hi, I have followed all the steps exactly but unfortunately it does not work. Can you help me further

    • @cssexpresstutorials
      @cssexpresstutorials  9 หลายเดือนก่อน

      Hi, can you provide a link so that I can take a look?

    • @cssexpresstutorials
      @cssexpresstutorials  9 หลายเดือนก่อน

      Feel free to send an email with the details :)

    • @franktielemans6624
      @franktielemans6624 3 หลายเดือนก่อน

      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.

  • @aminvalipoor2061
    @aminvalipoor2061 10 หลายเดือนก่อน +1

    thank you

  • @BeerioMusic
    @BeerioMusic 3 หลายเดือนก่อน +1

    not work

    • @cssexpresstutorials
      @cssexpresstutorials  3 หลายเดือนก่อน

      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

  • @jjes.studio
    @jjes.studio 10 หลายเดือนก่อน +1

    Hi. Can I also change the color of the text or hide the text No file chosen? The text next to the button

    • @cssexpresstutorials
      @cssexpresstutorials  10 หลายเดือนก่อน

      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!

    • @jjes.studio
      @jjes.studio 10 หลายเดือนก่อน +1

      @@cssexpresstutorials Great. Thank you. And if you can also add a download icon, then it will be incomparable.

    • @cssexpresstutorials
      @cssexpresstutorials  10 หลายเดือนก่อน

      You mean to add a download icon in the button itself with the text 'Upload file'? @@jjes.studio

    • @jjes.studio
      @jjes.studio 10 หลายเดือนก่อน +1

      @@cssexpresstutorials Yes. If possible. before and after the button text. both options

    • @cssexpresstutorials
      @cssexpresstutorials  10 หลายเดือนก่อน

      Noted - the video is on the way! @@jjes.studio