What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    CSS styling for "Options" in a drop down field not being rendered in Mac OS computer using Chrome and Safari

    Asked by snaplash on February 17, 2016 at 10:36 AM

    So I have a drop down that has a large font output size as below:

     

     

    However, when it is clicked the options menu has the same font size as the output.

     

    Is it possible to set the options menu text to a smaller size like 18px?

     

     

     

    Thank you so much for your input.

  • Profile Image

    Answered by Huberson on February 17, 2016 at 01:32 PM

    Hello,

    You can apply styles to the option alone by injecting the following CSS into your form. you can adjust the font at your preference.

    .form-dropdown option {

        font-size: 14px!important;

        font-weight: normal!important;

    }

    See How to Inject Custom CSS Codes.

     

    Thanks!

     

  • Profile Image

    Answered by snaplash on February 17, 2016 at 01:59 PM

    Thank you Huberson,

    I cannot get it to work though with this CSS.

     

    .form-dropdown option {

        font-size : 14px!important;

        font-weight : normal!important;

    }

     

    .form-dropdown {

        font-size : 40px;

        font-weight : bold;

    }

     

    I created a standalone form to try to get it to work. But I still cannot unfortunately

    https://form.jotform.com/60475339791970

    Is this correct or what am I doing wrong?

  • Profile Image

    Answered by Huberson on February 17, 2016 at 04:25 PM

    Can you please share with me the URL of the form you are trying to apply the style to?

    I have made a clone of your form and apply the CSS above just fine. If you look at the image bellow you can see the style being applied to the option.

     Take a look at the clone Here.

     

    Please Let me know if you were able to fix it!

  • Profile Image

    Answered by snaplash on February 17, 2016 at 04:27 PM

    The link is broken

  • Profile Image

    Answered by snaplash on February 17, 2016 at 04:29 PM

    The link to the form I want to apply it to is

    https://form.jotform.com/60473828499976

    and the field is:

  • Profile Image

    Answered by Huberson on February 17, 2016 at 05:05 PM

    I made a clone of the form and change the font-size of the Textbox. Can you please go ahead take a look a the a it and tell me if that what you need to achieve.

     

    Thanks!

  • Profile Image

    Answered by snaplash on February 17, 2016 at 05:21 PM

    I truly appreciate your help on this, however maybe I am not making myself very clear.

     

    I would like to have the Dropdown selected option be 40px like below:

    However when the drop down options are visible like below:

    I would like the font size to be 24px and once an option is selected it will display again at 40px like below:

     

    Thank you again for your help Huberson. I hope I am doing a better job of explaining.

     

  • Profile Image

    Answered by Huberson on February 17, 2016 at 05:56 PM

    You are welcome!

    So you want the Selected option being 40px and the options 24px like in the image bellow. Please correct me if I'm wrong. 

    If this is what you want, since the Select option is already 40px in your form you only need to inject the bellow CSS into the form.

    .form-dropdown option {

        font-size: 24px!important;

    }

    Here is a modified version of the clone: https://form.jotform.com/60476121530951.

     

    Do not hesitate to ask further questions if you need. We will be here for you!

  • Profile Image

    Answered by snaplash on February 17, 2016 at 06:07 PM

    It looks great in yout screen shot - but I am not seeing that in my browsers after clearing all cache and history etc

    Firefox looks like

    Chrome is unchanged.

     What browser are you using?

     

    I am on a new Mac Pro

  • Profile Image
    JotForm Support

    Answered by Charlie on February 18, 2016 at 03:17 AM

    I see you also have other drop down fields, I presume you don't want the changes you are referring to apply on those drop down fields? You only want to apply it on the first drop down field under the big blue circle with number 1 on it?

    I see you have a lot of custom CSS codes, there are some CSS selections that are blank, there are also repeated classes on different stylings. These extra codes seems to add weight on the loading time.

    I tried to decrease and clean it a bit in my cloned form. You can check it here: https://form.jotform.com/60481597733969. See if that works for your browsers.

    Basically, these are the custom CSS code, I edited and added some:

    /* Edited the font size and add height to the specific drop down field*/

    #input_33 {

        font-size : 40px;

        border : 0 !important;

        background : transparent;

        position : relative;

        padding-left : 5px;

        width : 400px !important;

        height: 60px !important;

    }

     

    /* Matched the width and the height of the option selection */

    #cid_33 {

        width: 150px !important;

        height: 60px !important;

    }

     

    /* Specific font size for the list of options in the drop down field */

    #input_33 > option {

        font-size: 24px !important;

    }

     

    You can clone my form and copy the whole CSS code, you have around 1300+ lines of code, you can use CTRL+F inside the CSS tab to find specific ID and class, so that instead of adding new ones, you can just edit them. You can also first copy your old CSS code and paste it on a text editor so that you can have a back-up of it. In case my cloned form has some missing major CSS styling that I have deleted when I was cleaning it.

    Let us know if that works.

  • Profile Image

    Answered by snaplash on February 18, 2016 at 07:07 AM

    Thanks Huberson!

     

    For the life of me, I cannot get this to work :-)

    I created a form with the code and the Dropdown only - obviously changed the id's and still it is not working

    https://form.jotform.com/60475339791970

     

    Does this work on yours?

     

    M.

  • Profile Image
    JotForm Support

    Answered by Charlie on February 18, 2016 at 08:29 AM

    I'm sorry to hear that. We'll do our best to help you on this.

    That form seems to work in my Chrome and Firefox properly, I see the selected option has a larger font while the list of options are small.

    Firefox:

    Chrome:

     

    May I know if this cloned form https://form.jotform.com/60481597733969, that I shared does not work in your browser? Perhaps a screenshot of what you are seeing using our form would help? 

  • Profile Image

    Answered by snaplash on February 18, 2016 at 08:36 AM

    Hi Charlie,

    On that cloned form I see the following two images:

     

    There is no change in font size - and on the basic form https://form.jotform.com/60475339791970 I see the following:

    Again - no change. Very strange indeed.

  • Profile Image
    JotForm Support

    Answered by Charlie on February 18, 2016 at 11:00 AM

    I have cleared your form's cache in our back-end.

    Could you please try viewing your forms using Chrome's incognito mode or using Firefox private browsing feature? I'm making more research and it seems like it is more related on Mac OS using it's own styling on drop down fields. I'll make further research and see if there's any workaround for this. 

  • Profile Image

    Answered by snaplash on February 18, 2016 at 11:07 AM

    Hey Charlie!

    You are completely correct! It is a Mac issue - I just tested both the forms on a Multiple PC's on multiple Browsers and it works as you designed.

     

    Well, unless you can speak to Tim Cook, I guess this is closed.

     

    Once again - Thank you  to both yourself and Huberson!

     

    Mark

  • Profile Image
    JotForm Support

    Answered by Charlie on February 18, 2016 at 11:30 AM

    Not sure why browsers and other computer OS are using different rendering methods. I wish they could just use one to avoid cross browser compatibility issues.

    I have forwarded this to our developers to see if they can do something about it. We will update you as soon as we hear any news. Thank you for your understanding.

  • Profile Image

    Answered by snaplash on February 18, 2016 at 11:32 AM

    Thanks again

  • Profile Image

    Answered by skevik on August 30, 2016 at 02:01 AM

    Any news on how to change CSS rendering on Macs? I got everything looking good on PC but on MacBook or iPhone, the dropdown fields don't follow format...

    https://form.jotform.com/62397392464264

  • Profile Image
    JotForm Support

    Answered by BJoanna on August 30, 2016 at 07:21 AM

    Unfortunately this is still not possible. I have checked status of this ticket and it is still opened. I will check with our developers to see if there is any update. If there is we will inform you via this thread.

  • Profile Image
    JotForm Support

    Answered by BJoanna on August 31, 2016 at 07:43 AM

    Our developer informed me that this issue is related to MacOS and that there is nothing that we can do on our end to fix it.