Text Size for Drop Down Menu/Input Select Not Working in Safari

HTML select font-size

You'll need to turn off the default OS styling with: -webkit-appearance: none;
(If you're making a highly-styled dropdown, this is essentially a complete style reset.)

Live Demo

You could also try: -webkit-appearance: menulist-button;
(Though I'm not sure how other style effects will affect this one.)

Sizing option independently from select

This is an interesting problem and one that I've come across myself but as far as I know there is now way to achieve this. Read this CSS Tricks article for a more complete treatment.

Several browsers lock down certain components and don't expose options to modify their styling without some serious wizardry. Another similar but different example is a checkbox, while you can customize checkboxes doing so is non-trivial.

I'd suggest either revisiting your design as the author of CSS Tricks suggests or you could go with a already made solution such as Select2 Plugin, or Selectize, or you could make one from scratch using these as a reference.

CSS Safari strange view on selectoption

The gradient you see comes from safari default style.

You can remove it with -webkit-appearance:none;

Read more about -webkit-appearance here

How to set height Or Padding in select box (dropdown box) for safari and chrome?

Did you try this CSS for your drop down?

overflow: hidden;
border: none;
outline: none;
-webkit-appearance: none;

For Safari you can try

-webkit-appearance: menulist-button;

so that width and height will work (link)

then you can use background,font-family,padding etc to further enchant your custom select tag. It worked for me in Safari/Chrome/FF ...

EDIT:

Editing option tag is not that easy. You can use the css below but everything is not customisable unfortunately

select option {
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

sources: 1,2

How to change font-family of drop down's list item?

That's because the select elements children (options) aren't really stylable and firefox seems to be the only browser to ignore that part of the spec.

The workaround is to replace your select element with a custom widget that uses only stylable elements and perhaps a little javascript for the interactivity. like what's done here: ~~http://jsfiddle.net/sidonaldson/jL7uU/~~ or http://jsfiddle.net/theredhead/4PQzp/

Select Dropdown is not working on iPhone iOS version 14.6 in Safari Browser

In my index.aspx page I'm using the fastclick.min.js and above the line of code in the document.ready block.

var attachFastClick = Origami.fastclick;
attachFastClick(document.body);

So basically what I did, trace down the index file from top to bottom for the script code which might be the cause for this dropdown issue. So commented out the line of code that might be the cause for the issue and then tested on iOS 14.6 device for safari browser.
As soon as I commented out the code related to fast click and check on iphone iOS
14.6 it starts working.

I'm not sure why the drodown is not working on iPhone iOS 14.6 safari browser when with fastclick.js include.