Cannot edit coupon code part of form in CSS

I have a stripe payment section in my form I am trying to edit either in CSS or however and can not. Its the coupon area of stripe when one enters a coupon code I want to expand the size in length and change the font neither I can do in this section for some reason?  why and how?

picture included

Use this CSS codes to customize the coupon code text box.

#coupon-input {

    font-size: 14px;

}

#coupon-container {

    width: 212px;

}

Just change the font size to anything you prefer. The coupon container width is optional, you can change it if the coupon text box does not fit in the container anymore.

Here's how to inject custom CSS codes to your form http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

Got th button larger and font text for box

But how do I edit the outside to make it larger the green area? cant figure it out what its named?

and all so How do make the FONT larger when I press apply button, it shows the output text?

Try the next CSS to increase the size of the coupon container and the font size of the coupon message.

#coupon-container {
width: 350px !important;
}
#coupon-message {
font-size: 14px;
}

That worked perfectly!

Thank you

question? what does the

!important;

do?

How did you know it was called "coupon-container"  ? where do you find that?

The !important rule is used for overriding the CSS that is currently in the form or for the specific element. 

The "coupon-container" is the field ID. You can find some of the field ID/Names in the form builder (https://www.jotform.com/help/146-How-to-find-Field-IDs-Names), but not all, so you'll need to do it by inspect element of your browser.

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/ 

thank you but the #coupon-container  is not shown when looking for it, so that why I asked how he knew what it was..

In this example, I am using Google Chrome but it works pretty much similar for all mainstream browsers.

First open the developer tools:

Then do the following to find the id or class of the element you are looking for.

I hope this helps you.

Yes thank you now it says coupon container because I added it in the css but before I added it it didn't say that.. it was something like,  unidentified div