Setup issues with submit/reset button!

I selected one of the provided metalic background. Issues:

1) only show for the reset button, but not the submit button.

2) only show when I press. Can I set it up so that it shows the choosen default background even when it is not pressed?  

3) font-variant does not work in button setup, it seems.

/*--- submit button --*/

#input_80 {

  ...

    font-variant :small-caps !important;

 }

 

4) hover set up  with shadow does not work either: 

form-submit-button:hover {

    color : #821515!important;

    font-variant : small-caps!important;

    box-shadow : 0 12px 16px 0 rgba(0,0,0,0.5), 0 17px 50px 0 rgba(0,0,0,0.5) !important;

}

Thank you for reporting us. 

I checked several of your forms but did not found the correct form. Could you please provide us the form ID for which the specified Css can not be applied properly? Then, we can investigate issue further.

Waiting for your return. 

/63639268386168
Thank you.
Sent from my Verizon 4G LTE smartphone
...

I have checked your form and I can see the following: 

1. The button shows like the screenshot below, as you can also see, the "font-variant" also seems to be already applied: 

2. The code you have injected for the submit button seems to have a missing point right before the class name. Your current code is like this: 

form-submit-button:hover {

 

    color : #821515!important;

 

    font-variant : small-caps!important;

 

    box-shadow : 0 12px 16px 0 rgba(0,0,0,0.5), 0 17px 50px 0 rgba(0,0,0,0.5) !important;

 

}

It should be like this: 

.form-submit-button:hover {

 

    color : #821515!important;

 

    font-variant : small-caps!important;

 

    box-shadow : 0 12px 16px 0 rgba(0,0,0,0.5), 0 17px 50px 0 rgba(0,0,0,0.5) !important;

 

}

Once you fix this then the box shadow and all the code will be applied. 

Please, do let us know if there are still some CSS codes not applying to the form, we will be glad to help you.

=================  

Ref to my (1) 

The metallic background somehow only works for the clear form button, but not the main submit button. 

Suggestion? 

===================          

Ref to my (4) ... The button shows like the screenshot below, as you can also see, the "font-variant" also seems to be already applied: 

No, the small-caps do not work. e.g. 

 

This Is A Sentence Done Without Small Caps. 

This Is A Sentence Done with Small Caps.  . //as you see  with whichever letter I "capitalize" manually will look bigger in small caps setup.

 

I figured out that I must do this in order to make it work: 

   font-variant : small-caps !important;

   text-transform: capitalize;!important;

 

Any other better alternatives?  

I'm not sure which part of the css was not applied. Since, I checked your form and css code seems to be applied properly.

 

In addition, the submit and reset button background color is changed when I added following part to the code on my cloned form. 

Could you please check again and let us know which parts were not applied on the code? 

1)about the small caps.  

Generally,   text like "I am fine" in small-caps will look like this : "I AM FINE

However.. The earlier support indicated the following: 

           font-variant : small-caps !important;  

along has already applied the small-caps effect.  But, it does not.  "I Am Fine",  turned out looking like this instead "I AM FINE".  That's not what small-caps should be.  It should have been :

"I AM FINE"  instead of "I AM FINE". 

I suspected the support did not realize that I "capitalized" each word. Thus, he thought small-caps worked all along!?   I found out I had to do the following as well in order to get it to work. :

         text-transform: capitalize;!important;

with

          font-variant : small-caps !important;  

 From what I understand, just the font-variant : small-caps should have worked by itself.  Would it be because of the Roboto font type!? 

 

2) about the submit button background.  :

What you quoted was  an old one.  I put it in there for testing earlier, as the metallic background did not show.  The background tag has been removed.  

The button was set to the following style, but it won't show like this at all.  What strange is that the clear form will show the meltallic background only when I hover on it. 

See below, the metallic background shows up ONLY when I  hover over the clear form button.   It does not show the chosen background any other time.

if I do not hover over either one, it looks like this: 

#1 I could not replicate the issue, it may be due to the fact that your computer does not have the specific font installed

Here is the screenshot of what I see at my end :

Please read the Article for more details

http://stackoverflow.com/questions/11935474/why-does-my-font-not-appear-on-some-computers-but-i-can-look-at-other-fonts-on

 

#2  I am still investigating for #2 issue and will get back to you ASAP

Inject the following CSS code to apply the hover effect on Submit button and stable clear button with steel effect

.form-submit-button-steel:hover {

    color: #555555 !important;

    border: 1px solid #999999 !important;

    background: #d4d4d4;

    background-position: 50% 50%;

    background-image: url(/images/steel.png);

    }

 

    button#input_reset_80 {

    color: #555555 !important;

    border: 1px solid #999999 !important;

    background: #d4d4d4;

    background-position: 50% 50%;

    background-image: url(/images/steel.png);

}

 

button#input_80 {

    color: #555555 !important;

    border: 1px solid #999999 !important;

    background: #d4d4d4;

    background-position: 50% 50%;

    background-image: url(/images/steel.png);

}

Since I host the form from my website, I have change the link to the steel.png to http://www.jotform.com/images/steel.png.

Thank you. 

@stormingrobots, 

If you have changed the link to your image then you only need to replace the link used in the CSS code, example:

   button#input_reset_80 {

    color: #555555 !important;

    border: 1px solid #999999 !important;

    background: #d4d4d4;

    background-position: 50% 50%;

    background-image: url(/images/steel.png);  <--- Replace this link with the current one. 

}

If you have any question, let  us know.