CODEWITHSUNDEEP
csswindowssafarihtml-select
eggs
eggs

Reputation: 351

Select Arrow missing on Safari Windows

I added some styling to selects using the following class:

.form-fields select {
height: 24px;   
background: url(/Images/ui/input-bg.jpg) #FFF repeat-x;  
border: 1px solid #AAA;
}

This works in all browsers except it causes Safari on Windows to omit a drop down arrow. If I comment out both background and border properties (and only both) the arrow is restored yet the height is ignored in all the other browsers.

I'd like to keep this styling as Windows Safari is a minority but am curious to know if there is a solution that works for all.

Upvotes: 7

Views: 10453

Answers (3)

Gauri Bhosle
Gauri Bhosle

Reputation: 5473

I have tried above code but it was not working for UI which was created usingh jquery.min.css. I have tried below css and it resolved my issue.I am targeting ui-icon-carat-d which shown dropdown arrow

.ui-icon-carat-d:after{
                background: url("https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-128.png") 95% 32% !important;
                background-repeat: no-repeat !important;
                background-color: #fff !important;
        }

Upvotes: 0

Gajen
Gajen

Reputation: 466

Place this in your css

*{
 -webkit-appearance: menulist;
}

Upvotes: 10

neicull
neicull

Reputation: 81

I was having the same bug on iPhone iOS. I removed a background-color:transparent; style and it fixed the missing select arrow browser UI.

Upvotes: 7

Related Questions