Customise file upload button

I am trying to customise the file upload button by injecting the following CSS:

.qq-upload-button {

      color : #ffffff !important;

      background-image : url(https://www.nottingham.ac.uk/siteelements/images/base/internal/cta-icons/white/bg-icon-white-right-arrow.png) !important;

      font-weight : bold !important;

      display : block;

      text-decoration : none;

      height : auto;

      clear : both;

      background-color : #007ca7 !important;

      text-align : left;

      padding : 10px 60px 10px 8px !important;

      background-size : 18px auto !important;

      background-position : right 10px top 50% !important;

      background-repeat : no-repeat !important;

      margin-bottom : 4px;

      border : 2px solid transparent;

  }

   

.qq-upload-button-hover {

    color : #18194f !important;

    background-color : transparent !important;

    font-weight : bold !important;

    display : block;

    height : auto;

    clear : both;

    border-color : #18194f !important;

    background-size : 18px auto !important;

    background-position : right 10px top 50% !important;

    background-repeat : no-repeat !important;

    text-align : left;

    padding : 10px 60px 10px 8px !important;

    margin-bottom : 4px;

    text-decoration : none !important;

    background-image : url(https://www.nottingham.ac.uk/siteelements/images/base/internal/cta-icons/Colour/bg-icon-blue5-right-arrow.png) !important;

}

However, the text is not display on hover:

May you please help me with this?

Best,

José

On the CSS codes you shared with us in your post, please update the selector used for the upload button when being hovered over.

It will be from .qq-upload-button-hover to .qq-upload-button.qq-upload-button-hover.

I hope this helps. If you have other questions or concerns, please do not hesitate to let us know.

Thank you. It worked!

Best,

José