Arch Linux

Archadious

Member

Registered: 2007-03-07

Posts: 14

Firefox default form element styling

I'm running firefox 3.5.5 under x86_64, kernel 2.6.31 on openbox 3.4.7.2

When ever I display a web page that has no specific styling of form elements they appear without any default styling.  This results in unsightly page displays.  I also run the Midori browser for comparison and the same pages display just fine. 

How and were does Firefox make use of default style information about form elements?  Often pages are rendered useless to me in Firefox because form elements are to large.

-A

grassmonk

Member

From: Utah

Registered: 2007-11-14

Posts: 68

Re: Firefox default form element styling

Firefox form elements are controlled by your GTK+ theme, with some exceptions (like the file upload dialog).  You can also style things yourself with CSS by creating a file called userContent.css in ~/.mozilla/firefox/[your profile directory]/chrome/ (for most things) and editing /usr/lib/xulrunner-1.9.1/res/forms.css for others (like the file upload dialog).

As an example, here is my userContent.css:

select[multiple],
textarea,
input:not([type]),
input[type="text"],
input[type="search"],
input[type="password"] {
    -moz-appearance: none !important;
    margin: 1px;
    border: 2px solid ThreeDShadow;
    -moz-border-top-colors: ThreeDShadow Window;
    -moz-border-right-colors: ThreeDShadow ThreeDHighlight;
    -moz-border-bottom-colors: ThreeDShadow ThreeDHighlight;
    -moz-border-left-colors: ThreeDShadow Window;
    -moz-border-radius: 5px;
    padding: 1px;
}

select[multiple] {
    border-width: 2px 1px 2px 2px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-bottom-colors: ThreeDShadow Window;
    -moz-border-right-colors: ThreeDShadow;
    padding: 1px 0;
}

select[multiple]:hover,
textarea:hover,
input:not([type]):hover,
input[type="text"]:hover,
input[type="search"]:hover,
input[type="password"]:hover {
    -moz-border-top-colors: #3687e3 #91c5ff;
    -moz-border-right-colors: #3687e3 #91c5ff;
    -moz-border-bottom-colors: #3687e3 #91c5ff;
    -moz-border-left-colors: #3687e3 #91c5ff;
}

select[multiple]:focus,
textarea:focus,
input:not([type]):focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus {
    -moz-border-top-colors: #2f5887 #abc3de;
    -moz-border-right-colors: #2f5887 #abc3de;
    -moz-border-bottom-colors: #2f5887 #abc3de;
    -moz-border-left-colors: #2f5887 #abc3de;
}

and here is what I append to /usr/lib/xulrunner-1.9.1/res/forms.css:

*|*::-moz-dropdown-list {
  border: 1px solid ThreeDShadow !important;
}

input[type="file"] > input[type="text"] {
  -moz-appearance: none !important;
  margin: 1px;
  border: 2px solid ThreeDShadow;
  -moz-border-top-colors: ThreeDShadow Window;
  -moz-border-right-colors: ThreeDShadow ThreeDHighlight;
  -moz-border-bottom-colors: ThreeDShadow ThreeDHighlight;
  -moz-border-left-colors: ThreeDShadow Window;
  -moz-border-radius: 6px;
  padding: 1px;
}

input[type="file"] > input[type="text"]:hover {
  -moz-border-top-colors: #3687e3 #91c5ff;
  -moz-border-right-colors: #3687e3 #91c5ff;
  -moz-border-bottom-colors: #3687e3 #91c5ff;
  -moz-border-left-colors: #3687e3 #91c5ff;
}

input[type="file"] > input[type="text"]:focus {
  -moz-border-top-colors: #2f5887 #abc3de;
  -moz-border-right-colors: #2f5887 #abc3de;
  -moz-border-bottom-colors: #2f5887 #abc3de;
  -moz-border-left-colors: #2f5887 #abc3de;
}

I use the QtCurve theme and added these settings to further customize Firefox form fields.