Could you show me how to apply CSS to the Input Mask widget please?

Hey Jotform!

 

I tried searching, but could you show me how to add the following CSS to Masked Input "Property Price" on form https://form.jotform.com/60690023930954?

 

 border-top-width : 0!important;

    border-right-width : 0!important;

    border-left-width : 0!important;

    border-bottom-width : 1px!important;

    border-bottom-left-radius : 0px;

    border-bottom-right-radius : 0px;

    border-color : #5f5f5f!important;

    width : 160px!important;

    font-family : Lato;

    font-size : 24px;

    font-weight : 300!important;

    color : #5f5f5f;

    background : transparent;

    position : relative;

    text-align : left;

    padding-left:10px;

   

 

I added this to the #maskedInput tag but the fonts and many other attributes would not change.

Any help you can offer would be spectacular!

I am trying to get the "Property Price" to look like the fields above and below.

 

Thank you!

Mark.

Hello Mark,

The correct syntax of your custom css code should be:

#maskedInput{

border-top-width: 0 !important;

border-right-width: 0!important;

border-left-width: 0!important;

border-bottom-width: 1px!important;

border-bottom-left-radius: 0px;

border-bottom-right-radius: 0px;

border-color: #5f5f5f !important;

width: 160px !important;

font-family: Lato;

font-size: 24px;

font-weight: 300!important;

color: #5f5f5f;

background: transparent;

position: relative;

text-align: left;

padding-left: 10px;

}

 

I have added the above custom css code in your widget. Please check the screenshot below:

 

Hope this helps.

Do get back to us if you have any questions.

Thank you!

Hello Ashwin!

 

Thanks for helping me!

Unfortunately the font will not set to 300 weight and the bottom cuts off

 

Am I doing something wrong...?

I see that the masked input field is the one named "Property Price". Upon inspecting the field, it appears that the custom CSS is applied to this field correctly:

When it comes to the field being cut off, I see that it displays correctly on Firefox, and is getting cut off in Chrome:

The reason it is getting cut off is because the widget resides inside an iFrame, so that it can have all its functionality separated from any scripting conflicts between the form and the widget. The widget tries to resize its iFrame on the form so that everything from inside the iFrame can be shown, but sometimes it can't manage to do so due to custom CSS inside the widget.

The input field inside the iFrame is set to height of 65 pixels, while the iFrame itself has only 24 pixels.

In order to fix this, we can simply add a small bit of CSS code inside the form itself (and not inside the widget), so that the iFrame containing the widget will have more space:

#customFieldFrame_914 { min-height: 65px; }

You can add this code to your form by opening it up in the Designer, switching to the CSS tab, and pasting the code at the bottom of the textbox there. Please let us know how it goes.

Boris! 

 

Many many thanks for your detailed and clear answer! All is working fine but one thing.

The Font is listed in the widget as 

#maskedInput {font-family:inherit}

 

Even though my css says:

font-family : Lato!important;

    font-size : 24px!important;

 

    font-weight : 300!important;

 

My font-weight will not change and also I cannot get rid of the blue highlight box.

 

 

First of all, on behalf of my colleagues you are welcome. 

Now, I'm not sure if understood your request, I have checked your form and seems like it is applying the CSS style, it also is shown in the console. 

Were you able to apply the CSS code? 

Please, do let us know, we will be glad to take other look to your form. 

Unfortunately, the font weight of 300 will not apply to the css in the
widget.
Could you show me how to do that please?
...

Could you please try to set:

font-weight: bold !important;

Please let us know if that could work for you, since, I checked and number values for font-weight doesn't affect weight of font.

 We'll wait for your response.

Thank you.