Firefox CSS Magic
Published Sunday, November 12, 2006 @ 4:17 pm • 12 Responses
Consider this post an evolving receptacle for Firefox-specific CSS tricks.
Change the 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 the opacity of an element
div#division { /* choose either attribute */
-moz-opacity: 0.99; /* possible values: 0-1 */
-moz-opacity: 99%; /* possible values: 0%-99% */
}Control item selection of an element
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 */
}Round the corners of elements
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 to an element
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 in elements
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 to an element
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;
}About this article
Related articles
- Embed External Content via iframe and div
- Sharpen Your Site by Removing Unwanted Link Border Outlines
- Maximum and Minimum Height and Width in Internet Explorer
- MySQL Magic: Find and Replace Data
- Absolutely Centered Layout
- Quick JavaScript Tip: Auto-Highlight Form Inputs and Textareas
- Obsessive CSS Code Formatting: Patterns and Trends
Dialogue
12 Responses Jump to comment form
January 13, 2008 at 3:23 am
These are nice little tricks but as far as I can see, nothing with a ‘-moz-’ prefix validates as CSS3 :(
January 18, 2008 at 3:22 pm
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’.
January 19, 2008 at 3:42 am
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.
January 20, 2008 at 12:31 pm
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.
April 17, 2008 at 1:48 am
I wish you’d have provided actual examples as well, good write up though!
Trackbacks / Pingbacks
[ Comments are closed for this post. ]
If you have additional information, contact me.
← Previous post • Next post →
« One Year Anniversary • Perishable Press Upgrade to WordPress 2.0.5 »
1 • Mike
December 20, 2007 at 11:45 pm
Wow! Nice work. Thanks for taking the time to create and publish this!