CODEWITHSUNDEEP
javascripthtmlcsscross-browser
pemistahl
pemistahl

Reputation: 9584

Uniform select box style across all browsers?

I'm working on a web application that contains forms with several select boxes. In Firefox, select boxes consistently look like text inputs and multiple choice boxes and they mimic the CSS styles used for the latter as in the image below:

Select box style in Firefox

In Chrome and Safari, unfortunately, select boxes have their own and very ugly design that is not consistent with the other input fields, thus breaking the design:

Select box style in Chrome and Safari

Is there any way (using CSS and/or JS) to make select boxes look the same in all browsers, using the Firefox style?

Upvotes: 2

Views: 4409

Answers (2)

Volomike
Volomike

Reputation: 24886

At least I know how to sync a SELECT style somewhat between Firefox and Chrome. Edge is going to be Chromium-based soon and so it will sync with Chrome/Chromium styling.

Use this CSS:

/* FIREFOX FIX OF UGLY SELECT BOXES */
@supports (-moz-appearance:none) {

  SELECT
  {
  -moz-appearance:none !important;
  background: transparent url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat !important;
  background-position: calc(100% - 5px) center !important;
  }

}

Upvotes: 0

pemistahl
pemistahl

Reputation: 9584

Ah, now I've found a CSS/JS package for this job myself: Formalize.me

It seems to be more actively maintained than UniformJS. I think I'll go with this one first.

Upvotes: 1

Related Questions