{"id":1057,"date":"2016-05-26T08:53:15","date_gmt":"2016-05-25T23:53:15","guid":{"rendered":"http:\/\/n8finch.com\/?p=1057"},"modified":"2021-03-02T05:32:36","modified_gmt":"2021-03-01T20:32:36","slug":"changing-select-menus-cross-browser-compatibility","status":"publish","type":"post","link":"https:\/\/n8finch2024.local\/changing-select-menus-cross-browser-compatibility\/","title":{"rendered":"Changing Select Menus for Cross-Browser Compatibility"},"content":{"rendered":"
In doing theme or plugin development, maybe you’ve noticed that the various\u00a0browsers represent fields and inputs differently.\u00a0Two recent projects, I ran into this inconsistency, and the client wanted everything uniform.<\/p>\n
So, here’s what the different browsers represent a dropdown select:<\/p>\n
Chrome:<\/p>\n
<\/a><\/p>\n Safari:<\/p>\n <\/a><\/p>\n Firefox:<\/p>\n <\/a><\/p>\n <\/p>\n If you try and edit this in CSS with a simple change to the So, what’s a dev to do??<\/p>\n Enter While you need to make sure you’ve got your vendor prefixes in there (see below for the full example), this will normalize\/reset the styles for the select dropdown across all browsers.<\/p>\n Then, you can style as you like. Here’s the code I used below to get these styles working on https:\/\/akgoods.com<\/a>:<\/p>\n Some of this code was copied from another site (can’t remember where, in the heat of the moment, I neglected to cite my source!). However, this code, plus the background image, turns all select dropdowns into this:<\/p>\nborder-radius<\/code>\u00a0property, that’s not going to work. Also, you want to get rid of the different drop-down arrows (thanks for being so weird Firefox!).<\/p>\n
appearance: none<\/code>\u00a0!!<\/p>\n
select {\r\n-webkit-appearance: none;\r\n-moz-appearance: none;\r\nmax-width: 100%;\r\ndisplay: block;\r\nheight: 24px;\r\npadding: 0 10px;\r\nbackground: #fff;\r\noverflow: hidden;\r\nline-height: 22px;\r\nfont-size: 13px;\r\nborder-radius: 0;\r\nwhite-space: nowrap;\r\ntext-overflow: ellipsis;\r\nposition: relative;\r\nborder: 1px solid #D5D5D5;\r\nbackground-image: url(images\/select-arrow.png);\r\nbackground-position: 96% 50%;\r\nbackground-repeat: no-repeat;\r\n}<\/pre>\n