CODEWITHSUNDEEP
htmlformsfirefoxtwitter-bootstrapcross-browser
RushPL
RushPL

Reputation: 4805

Forms under bootstrap not uniform across FF/Chrome

I recently started using Bootstrap for my projects. All in all a very helpful projects, however I stumbled upon a problem with form appearance. Please see bottom pictures that I made looking at the following web page from Firefox: http://bootstrap-forms.heroku.com/

Checkboxes are badly unaligned Select is very ugly

This is very very disappointing, because on Chrome it looks perfect. Not only I need to overwrite the default browser colours - I use black theme in KDE/openSUSE, but I would also need to align the labels manually for Firefox - which I don't want to do!

Any suggestions for a quick solution to fix those forms across browsers? At least the aligning issue.

Firefox reports version 15.0.1, Linux / openSUSE version is 12.2.

Upvotes: 1

Views: 1967

Answers (1)

RushPL
RushPL

Reputation: 4805

Solution was to edit userContent.css file located in .mozilla/firefox/<profile>/chrome/ directory.

I have added the following:

* {
  -moz-appearance: none;
}

This property by default causes Firefox to use native system widgets on non-styled buttons/radios/checkboxes etc. Unfortunately it seems buggy on my setup. See https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance for more details.

Upvotes: 1

Related Questions