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 = Creative thinker. Passionate about free and open Web.