Edit the upload button style same as the submit button

  • surfinscherfen
    Asked on March 29, 2018 at 2:16 PM

    How do I edit "SELECT IMAGE" button on my form so it looks like "Submit" button?

    Jotform Thread 1430038 Screenshot
  • Elton Support Team Lead
    Replied on March 29, 2018 at 3:25 PM

    Inject this into the Image Preview widget within the Custom CSS tab, this should copy the submit button style.

    button#pickImage {cursor: pointer; -moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em; padding: 8px 18px; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-shadow: -1px -1px 0px #000000; border: 1px solid #000000; -moz-box-shadow: inset 0px 1px 0px 0px #999999; -webkit-box-shadow: inset 0px 1px 0px 0px #999999; box-shadow: inset 0px 1px 0px 0px #999999; background: #000000; background: -moz-linear-gradient(top, #666666 0%, #000000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#000000)); background: linear-gradient(top, #666666 0%, #000000 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000', GradientType=0 ); text-transform:capitalize; } button#pickImage:hover{color: #ffffff !important; border: 1px solid #000000; background: #1a1a1a; background: -moz-linear-gradient(top, #808080 0%, #1a1a1a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#808080), color-stop(100%,#1a1a1a)); background: linear-gradient(top, #808080 0%, #1a1a1a 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#1a1a1a', GradientType=0 ); }

    Here's how:

    Edit the upload button style same as the submit button Image 1 Screenshot 20