Save 10% on our Pro WordPress plugins with discount code: 10PERCENT
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 :)

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

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 »
Banhammer: Protect your WordPress site against threats.
Thoughts
Working on a new book :)
LinkedIn decided to replace my highly rated video course on WP security. For a limited time the course is still available to *logged-in* users via direct URL.
I enjoy listening to original Star Trek and NG episodes while working online. After a while it feels like I’m working on the ship as part of the crew, going on adventures.
New version (2.6) of my shapeSpace starter theme now available! Always free & open source for everyone :)
Finished updating all of my books! As always, book owners can download the latest versions for FREE :)
W3C.org has a very thorough list of accessibility tools.
The more you wake up, the more you realize you are still asleep.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.