How to Use CSS Code to Change One Field

  • intranet.admin
    Asked on May 27, 2014 at 2:04 PM
    Please can you give me an example of the CSS code to change one field
  • Welvin Support Team Lead
    Replied on May 27, 2014 at 2:14 PM

    Hi,

    Here's an example custom CSS codes:

    input[type=number] {

    width: 50px;

    }

    This would change the width of the number fields. Example: http://www.jotformpro.com/form/41465886822970

    How to Use CSS Code to Change One Field Image 1 Screenshot 20

    If you require any further assistance, feel free to contact us.

    Thanks

  • intranet.admin
    Replied on May 27, 2014 at 3:40 PM

    Please can you tell me if you can change specific fields, and if so examples of how.

  • Cesar
    Replied on May 27, 2014 at 4:49 PM

    You can change "customize" specific fields. But to answer your question better. Kindly elaborate further on what you are specifically trying to achieve. 

    As my colleague showcased on his response, you may use the Inspect Element feature on on Google Chrome or FireFox to obtain the currently used code on your form. This way you may modify it as needed and inject it using the Inject CSS Code feature to change specific fields.

    Please review this guide for more information:

    -How-to-Inject-Custom-CSS-Codes

    You can also find more examples on field customization here:

    -Customize-your-Form-using-Custom-CSS-Codes

    Thank you

  • intranet.admin
    Replied on May 27, 2014 at 5:54 PM

    Please can you give me an example of how to set the width of a particular field. In the example above, it is for field type number not a specific named field. (and how do I find the field ID please ?)

    input[type=number] {

    width: 50px;

    }

     

    kind regards

    Richard

  • jonathan
    Replied on May 27, 2014 at 7:12 PM

    Hi Richard,

    I suggest reviewing this JotForm user guides also

    1. -How-to-find-Field-IDs-Names

    How to Use CSS Code to Change One Field Image 1 Screenshot 20

     

    2. -How-to-apply-custom-CSS-to-a-particular-field

     

    If you tell us also which among your forms you need a field width customized, we will help you do it. Please tell us the form URL.

     

    Thanks.

  • intranet.admin
    Replied on May 28, 2014 at 4:37 AM

    Oh dear, this question has been moved from the original thread and lost its context! The subject was Congurable List widget. I would like for example to set the width of a particualr field within the widget. I now know haow to do it for all 'number' types (see above), but can't find in any of the links supplied haow to do it for a specific field within the Congurable List.

     

    Please help!

  • NeilVicente
    Replied on May 28, 2014 at 5:33 AM

    These fields do not have ID's, only classes on their parent column (<td>). Judging from your own CSS used in the widget, I think you are doing well when it comes to getting the right CSS selector.

    If you're still having issues, may I ask which specific field in the widget do you want to customize with CSS?

  • RaveWolf
    Replied on May 28, 2014 at 9:35 AM

    The links and references are awesome.

    Can't wait to get home and start coding.

     

    Thanks for asking the question, and thanks to all for your answers.