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

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.

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!

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?

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!

The link is broken

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

https://form.jotform.com/60473828499976

and the field is:

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!

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.

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!

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

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.

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.

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? 

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.

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. 

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

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.

Thanks again

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

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.

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.