Plugin Sale! Save 15% on pro plugins with discount code: FALL2020
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 = Creative thinker. Passionate about free and open Web.
Digging Into WordPress: Take your WordPress skills to the next level.

11 responses to “Firefox CSS Magic”

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

  2. Jeff Starr
    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. Jeff Starr
    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. Jeff Starr
    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. Jeff Starr
    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. Jeff Starr
    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 »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
Spent some time refreshing my business portfolio at MonzillaMedia.com :)
Tried lots of apps for making animated GIFs from screen captures, so far Kap is my favorite. For example the GIF on this post.
Autumn is my favorite time of year.
Stoked! Had a great interview with Eric over at Speckyboy.com :)
Air finally clearing here in WA. Feeling grateful to breathe again. #oxygenmatters
Past week here in WA state has been hellish. So much smoke, like living in a chimney.
Now in September, I’m where I wanted to be in March.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.