Change the button style of Take Photo widget

On the form listed below, I'd like to make the default "take photo" button look like the picture below before having to push it. Let me know if this question is unclear. Here's the form: https://www.jotform.com/build/83616966031157

Here's what I'd like it to look like: 

I am not sure I understood your question correctly, do you wish the Take Photo button looks like the button in the image that you sent? I am afraid that it is not possible to do custom the text of the widget. Let us know if you need any further assistance.

Hey Andrew, so after I push the "Take photo" button on this form, it looks like the picture above (you can try it out to see what I mean). I'd like it to look like the picture above before having to push the take photo button.

Thank you

Thank you for providing us more information.

Below are the CSS codes that you can inject to the Custom CSS tab of the widget to achieve your requirements.

button#takePhoto:before {

    content: '\e800';

    background: #21a6cf !important;

    visibility: visible !important;

    font-family: takephoto;

    font-style: normal;

    font-weight: 400;

    speak: none;

    display: inline-block;

    text-decoration: none;

    width: 40px;

    text-align: center;

    font-variant: normal;

    text-transform: none;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    color: white !important;

    height: 35px;

    font-size: 25px;

    line-height: 35px;

}

button#takePhoto:after {

    content: " QUICK PIC & SAVE ™";

    position: absolute;

    left: 40px;

    visibility: visible !important;

    background: #21a6cf !important;

    width: 257px !important;

    white-space: nowrap !important;

    color: white !important;

    font-family: inherit;

    font-style: italic;

    text-align: left !important;

    font-size: 25px;

    line-height: 35px;

}

button#takePhoto {

    padding: 0px !important;

    margin: 0px !important;

    color: transparent;

    background: transparent;

}

.takePhoto-container {

    padding: 0px !important;

}

How-to-Inject-CSS-Codes-to-Widgets

If you want to change the dashed border of the button, you can also inject the optional codes below.

.takePhoto-container {

    border: .125em solid #21a6cf !important;

}

Hi this was working, but for some reason now it just shows the regular take photo button at first instead of the custom quick pick and save. How can I get this back? Tried to use the restore feature, but it actually messed up the entire display of the form now, didn't take it back to the correct restore version

I have tried my colleague's code without the "button" word, and it appears to work, please try this code again: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

#takePhoto:before {

    content: '\e800';

    background: #21a6cf !important;

    visibility: visible !important;

    font-family: takephoto;

    font-style: normal;

    font-weight: 400;

    speak: none;

    display: inline-block;

    text-decoration: none;

    width: 40px;

    text-align: center;

    font-variant: normal;

    text-transform: none;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    color: white !important;

    height: 35px;

    font-size: 25px;

    line-height: 35px;

}

#takePhoto:after {

    content: " QUICK PIC & SAVE ™";

    position: absolute;

    left: 40px;

    visibility: visible !important;

    background: #21a6cf !important;

    width: 257px !important;

    white-space: nowrap !important;

    color: white !important;

    font-family: inherit;

    font-style: italic;

    text-align: left !important;

    font-size: 25px;

    line-height: 35px;

}

#takePhoto {

    padding: 0px !important;

    margin: 0px !important;

    color: transparent;

    background: transparent;

}

.takePhoto-container {

    padding: 0px !important;

}

Here is my clone version: https://form.jotform.com/90959419230967 

I actually had to a minor change, so please try with this code:

#takePhoto:before {

    content: '\e800';

    background: #21a6cf !important;

    visibility: visible !important;

    font-family: takephoto;

    font-style: normal;

    font-weight: 400;

    speak: none;

    display: inline-block;

    text-decoration: none;

    width: 90px;

    text-align: left;

    padding-left: 5px;

    font-variant: normal;

    text-transform: none;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    color: white !important;

    height: 35px;

    font-size: 25px;

    line-height: 35px;

}

#takePhoto:after {

    content: " QUICK PIC & SAVE ™";

    position: absolute;

    left: 40px;

    visibility: visible !important;

    background: #21a6cf !important;

    width: 257px !important;

    white-space: nowrap !important;

    color: white !important;

    font-family: inherit;

    font-style: italic;

    text-align: left !important;

    font-size: 25px;

    line-height: 35px;

}

#takePhoto {

    padding: 0px !important;

    margin: 0px !important;

    color: transparent;

    background: transparent;

}

.takePhoto-container {

    padding: 0px !important;

}

Hi BDAVID, thanks for the reply. It's almost there, one issue is that the camera icon seems to be buried underneath the button itself / slightly different than how it was before. Here's a pic of what I mean:

I have corrected it in your form:

Please check again, and let us know if you need more help.

Hi BDAVID, 

Thanks for the reply, I just checked the form and it's still showing it like this:

I think this problem is with Safari. I can replicate the issue there. I'm checking this, and I'll keep you posted. 

I've fixed that. Can you check again? 

Hi Welvin, it looks a lot better, thanks! But it's still off slightly underneath and to the left of the Q. I'm attaching some pics. Also, now on the mobile version it makes me hit the quick pic and save button and then also another take photo button after...is there anyway to make it go straight to taking a picture just by clicking the quick pic and save button like on the desktop? (attaching pictures for this as well). Thanks.

     

FIRST SCREEN & SECOND SCREEN ON MOBILE:

What version of the Safari browser are you using? I just tested it in Safari 11.1, and it looked fine:

In regards to the behavior in mobile devices, there is no way to change that, it will depend on the type of operating system of the mobile device. In my Android device, a message is shown to allow enabling the camera after clicking on the Quick Pick & Save button.

My version is Safari 12.1

Could you check your form again on Safari 12.1? I have checked and corrected the CSS code on the form. Please check and let us know if you need any further assistance. We will be happy to assist. 

Hi yes, so it's still looking like this on these 3 forms: 

https://www.jotform.com/build/83616966031157

https://www.jotform.com/build/90455976707167

https://www.jotform.com/build/90445753007152

The camera icon  is still behind the quick pic button 

Can you check this form https://www.jotform.com/83616966031157 again? The button should display correctly now.