How to Use CSS Code to Change One Field

  • Profile Image
    intranet.admin
    Asked on May 27, 2014 at 02:04 PM
    Please can you give me an example of the CSS code to change one field
  • Profile Image
    Welvin
    Answered on May 27, 2014 at 02: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

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

    Thanks

  • Profile Image
    intranet.admin
    Answered on May 27, 2014 at 03:40 PM

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

  • Profile Image
    Cesar
    Answered on May 27, 2014 at 04: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

  • Profile Image
    intranet.admin
    Answered on May 27, 2014 at 05: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

  • Profile Image
    jonathan
    Answered on May 27, 2014 at 07:12 PM

    Hi Richard,

    I suggest reviewing this JotForm user guides also

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


     

    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.

  • Profile Image
    intranet.admin
    Answered on May 28, 2014 at 04: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!

  • Profile Image
    NeilVicente
    Answered on May 28, 2014 at 05: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?

  • Profile Image
    RaveWolf
    Answered on May 28, 2014 at 09: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.