-
xranger50Asked on July 22, 2016 at 5:00 PM
I know this question has been asked repeatedly, and I've tried all the suggested solutions I could find for this problem, but to no avail. I CAN NOT get the custom CSS that I injected for the "Submit" and "Reset" buttons on my form to display properly.
They do display as intended in "Designer" mode, and even the roll-over effect works there (the "Reset" button is in roll-over state in this screen shot)
But in the preview mode and online (Form URL attached) the rounded corners are ONLY in the roll-over state on both buttons, and the lighter colored border in the non-rollover state is missing as well.
Below is the CSS code I injected through the "Custom CSS" section in the "Preferences-Form Styles" tab (see attached screen shot), and it IS also showing in the source code of the form online below the /*__INSPECT_SEPERATOR__*/ section, but something seems to interfere with it displaying properly. What am I missing?
.form-submit-button {
background-image : url(https://www.jotform.com/uploads/xranger50/form_files/chromebg.jpg)!important;
color : #bbeff1!important;
border-style : double!important;
border-width : 3px!important;
border-color : #fed6fe!important;
height : 50px!important;
width : 170px!important;
box-shadow : 0 5px 5px #003643
0.3;
font : bold 16px Times New Roman,sans-serif!important;
border-radius : 15px;
}
.form-submit-button:hover {
background-image : url(https://www.jotform.com/uploads/xranger50/form_files/chromebg2.jpg)!important;
color : #003643!important;
border-style : double!important;
border-width : 3px!important;
border-color : #003643!important;
height : 50px!important;
width : 170px!important;
box-shadow : 0 5px 5px #003643
0.3;
font : bold 16px Times New Roman,sans-serif!important;
border-radius : 15px;
}
.form-submit-reset {
background-image : url(https://www.jotform.com/uploads/xranger50/form_files/chromebg.jpg)!important;
color : #bbeff1!important;
border-style : double!important;
border-width : 3px!important;
border-color : #fed6fe!important;
height : 50px!important;
width : 170px!important;
box-shadow : 0 5px 5px #003643
0.3;
font : bold 16px Times New Roman,sans-serif!important;
border-radius : 15px;
}
.form-submit-reset:hover {
background-image : url(https://www.jotform.com/uploads/xranger50/form_files/chromebg2.jpg)!important;
color : #003643!important;
border-style : double!important;
border-width : 3px!important;
border-color : #003643!important;
height : 50px!important;
width : 170px!important;
box-shadow : 0 5px 5px #003643
0.3;
font : bold 16px Times New Roman,sans-serif!important;
border-radius : 15px;
}
.form-all {
border : 3px double #fed6fe;
box-shadow : 0 5px 5px #003643;
}Page URL: https://form.jotform.com/62035108438148 -
MikeReplied on July 22, 2016 at 6:34 PM
Thank you for contacting us.
1) To fix the border-radius add !important statements to the styles.
2) To fix the border-color, please add the next CSS.
.form-all .form-submit-button {
border-color : #fed6fe!important;
}
.form-all .form-submit-reset {
border-color : #fed6fe!important;
}Result:
If there is anything else, please let us know.