creating an outline around HTML checkboxes

All,

I have a very specific problem I've been struggling with all day and could use some suggestions. What I need to do is to create an "outline" or border around all the HTML checkboxes on any given website (to be displayed in a Firefox extension) without disrupting the existing flow/styling of the page. For what it's worth, this only has to work in Firefox 1.5.0.4.

My original thought was simply to set a border property on each of the checkboxes...

input[type='checkbox'] {
  border: 4px solid red;
}

Code (markup):

... but that seemingly does exactly nothing (mind you, I don't want to mess with how the boxes themselves look, just put on an outline). Same goes for setting the background color and background image.

The next attempt was to insert a new div (via javascript) in front of the checkbox, absolutely positioned to be right where it should be, and then to set the z-indices such that the checkbox appears on top of the other div. For instance, the HTML structure would look like this:

<--mystery container element-->
    <--mystery siblings-->
    ...
    [B]<div class="inserted"></div>[/B]
    <input type="checkbox" other-attributes="mystery">mystery contents</input>
    ...

Code (markup):

...and the styling would be something like this:

div.inserted {
  position: absolute;
  top: [I](top of checkbox - 3)[/I]px;
  left: [I](left of checkbox - 3)[/I]px;
  width: [I](width of checkbox + 6)[/I]px;
  height: [I](height of checkbox + 6)[/I]px;
  background-color: red;
  z-index: -1;
}

Code (markup):

That works great in some cases, but in others it just hides the new outline behind the mystery container element. Since the mystery container element creates a new stack context for the z-indexing, I have to somehow get the inserted div into that stack context, then set the z-indexing relative to that, which apparently can't be done with an absolutely positioned element.

My third attempt was to simply insert the new div into the parent element with no absolute positioning and mess with the margins. HTML structure same as above, but the new style is like this:

div.inserted {
  display: block;
  width: [I](width of checkbox + 6)[/I]px;
  height: [I](height of checkbox + 6)[/I]px;
  background-color: red;
  margin-bottom: -[I](height of element)[/I]px;
  margin-top: -3px;
}

Code (markup):

This is much closer, in that the "outlines" will in fact show up. However, it alters the layout of the page (moves subsequent form elements around, etc) which is unacceptable.

So, is there some magical style attribute or crazy z-index trick that I'm missing? How can I outline the checkboxes on a page without changing the rendering of the rest of the page?

 

Nevermind. Turns out the magical attribute is "outline", as in:

input[type='checkbox'] {
  outline: 3px solid red;
}

Code (markup):

I guess I just didn't know about that one...

 

It's a part of css3, and not generally supported.

cheers,

gary

 

Seems to be a part of CSS2, actually. I don't doubt you on the lack of support, though. (see here: http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines )

It doesn't matter in my case, however, since it appears that Firefox 1.5.0.4 supports it in a way that works for me, which is all I need.

 

It seems you are right.

cheers,

gary