Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

Firefox CSS Magic

Consider this post an evolving receptacle for Firefox-specific CSS tricks.

Change color of highlighted text

*::-moz-selection {
	background: #FF3C00; /* the background color of the highlight */
	color: #FFF; /* the color of the text within the highlight */
}

Change opacity

div#division { /* choose either attribute */
	-moz-opacity: 0.99; /* possible values: 0-1 */
	-moz-opacity: 99%; /* possible values: 0%-99% */
}

Control item selection

div#division { /* choose one of the following values */
	-moz-user-select: none; /* no content within the element may be selected */
	-moz-user-select: all; /* contents may be selected only as a whole */
	-moz-user-select: text; /* [default value] only text may be selected */
	-moz-user-select: toggle; /* all contents of the element are selected */
	-moz-user-select: inhereit; /* inherits user-select value from parent element */
	-moz-user-select: element; /* elements may be selected one at a time */
	-moz-user-select: elements; /* multiple elements may be selected at the same time */
}

Rounding corners

div#division { /* choose one of the following values */
	-moz-border-radius: inherit; /* inherits border-radius value from parent element */
	-moz-border-radius: 7px; /* length/unit values indicate corner/border radius */
	-moz-border-radius: 70%; /* percentage values indicate relative corner radius */
}

Note that the -moz-border-radius property may be expressed as to target specific corner(s):

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Further, the following rule consolidates these four properties into one:

-moz-border-radius: 7px 3px 7px 3px;

Add an outline

div#division, h1 { /* choose one of the following values */
	-moz-outline-width: inherit; /* inherits moz-outline value from parent element */
	-moz-outline-width: medium; /* possible values: thin, medium, thick */
	-moz-outline-width: 7px; /* specifies outline width via an explicit length/unit */
}

Reverse item order

div#division { /* choose one of the following values */
	-moz-box-direction: normal; /* items displayed top to bottom and left to right */
	-moz-box-direction: reverse; /* items displayed bottom to top and right to left */
}

Add a multi-colored, multi-layered border

This nifty CSS property adds a border to an element that is any number of pixels in width. Each pixel-width of the border may display with a unique, user-specified color.

div#divisions { /* spcifies a border along with a uniform color for non-Moz browsers */
	border: 3px solid #333; /* if only two moz-border colors are defined, the third will be this color */
}
div#divisions { /* choose on of the following values */
	-moz-border-colors: inherit; /* inherits border-colors value from parent element */
	-moz-border-colors: none; /* [default value] no color-striping is applied */
	-moz-border-colors: red white blue; /* indicates color values from outside to inside */
	-moz-border-colors: #333 #777 #999; /* indicates color values from outside to inside */
	-moz-border-colors: ThreeDDarkShadow ThreeDShadow transparent; /* named values also apply */
}

Further, -moz-border-color property may be segregated as follows:

div#divisions { /* use any/all of the following attributes */
	-moz-border-top-colors: #333 #777 #999 #FFF;
	-moz-border-right-colors: #333 #777 #999 #FFF;
	-moz-border-bottom-colors: #000 #999 #CCC #DDD;
	-moz-border-left-colors: #000 #999 #CCC #DDD;
}

As always, questions and comments welcome :)

About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
.htaccess made easy: Improve site performance and security.

11 responses to “Firefox CSS Magic”

  1. Wow! Nice work. Thanks for taking the time to create and publish this!

  2. Perishable 2007/12/21 9:40 am

    My pleasure — thanks for the feedback ;)

  3. These are nice little tricks but as far as I can see, nothing with a ‘-moz-‘ prefix validates as CSS3 :(

  4. Perishable 2008/01/13 9:26 am

    Yes, that is true. Initial dashes and underscores have never been — and never will be — associated with CSS. Thus, any proprietary prefix beginning with either of these characters will forever fail to validate.

  5. An initial dashes signals a proprietary extension, and it’s the proper way for a browser to add non-standard functionality, as recommended by the W3C. Even if ‘invalid’, it’s still ‘correct’.

  6. Thanks for answering my comment :)
    I’ve taken to putting the ‘invalid’ css in a separate stylesheet with a comment at the top explaining why it doesn’t validate.

  7. Perishable 2008/01/20 9:22 am

    @Mister: Excellent point, Mister — thanks for the reminder!

    @Rob: That sounds like a great idea, especially for those of us concerned with web standards and good design. — Cheers!

  8. I am designing a page where I need to style a firefox checkbox. Is this posible?

    My stylesheet

    input.lastcheck {
         background-color: #3399CC;
         border: 1px solid #000066;
    }

    puts the blue border around it like I want it, in IE. Can somethings similar be done for Firefox?

    Thanks for letting me know.

  9. Perishable 2008/01/20 1:53 pm

    Hi Mikkel,

    Unfortunately, Firefox doesn’t seem to apply custom border attributes via CSS. On most platforms, you can specify custom height and width via CSS, and even add a background image, however, CSS-styled borders are yet to be supported. For more information, check out Roger’s excellent research on styling checkboxes.

  10. Dennison Uy 2008/04/17 1:48 am

    I wish you’d have provided actual examples as well, good write up though!

  11. Perishable 2008/04/20 7:31 am

    Yes indeed, that’s a great idea for a future post — thanks for the idea! :)

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
BBQ Pro: The fastest firewall to protect your WordPress.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.