DEAR FORUMS I AM VERY NOT LIKING THE LOGGING OUT OF MY PERSON WHILE I BUSY TYPING 5000 LOC AND THE ASKING OF THE PAGE REFRESHES FOR GREAT LOSS!!!1
Luckily I copied and pasted this crap into a text editor before Opera lost it all.
I was very unclear… I started typing as ideas came to me, and still prefer the last one I said 
This is how I deal with graphics-monkeys insisting on special form controls instead of the ones made by the browser (and so in this case, they can be stars):
I have divs or something wrapping the label-input pairs. They need a class.
I also have some Javascript I took from PacielloGroup for detecting if the user is mousing around or not, so that outlines and other crap I add for keyboard don’t show for mousers who click something in browsers who hold the focus state on that element (firefox esp).
<div class="starz">
<input type="radio" name="important_1" id="important_1">
<label for="important_1"><span>Mark as important</span></label>
</div>
The span’s there just if you want some more flexibility in showing/hiding/styling the label text without moving the label itself. You can’t move the label here–it’s holding an image covering up the real form control!
This is a lot of crufty code: I blame LESS, which another dev at my work had started using. Since I must in LESS, I’ve gotten lazy and more verbose in my CSS. It does NOT encourage good practice. Bleh.
.starz {
position: relative;
}
.starz:after {
content: '';
display: block;
clear: both;
height: 0;
}
.starz:not(#ie8) input[type=radio] {
position: absolute;
left: 0;
top: 0;
width: 25px;<-- SET TO STAR IMAGE WIDTH!
height: 25px;<-- SET TO STAR IMAGE HEIGHT! (and it's best if it's a "square" image)
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
}
//if you haz disabled stars possible
.starz:not(#ie8) input[type=radio]:disabled {
cursor: default;
}
.starz:not(#ie8) input[type=radio]+label {
min-height: 25px; <-- SET TO IMG HEIGHT-ISH
margin: 0; <-- I OFTEN ADJUST WITH MARGINS
padding: 0 0 0 30px; <-- ASSUMING IMAGE IS TO LEFT OF LABEL. If you're not showing label, make width of image
line-height: 25px;<-- LINE IT UP WITH IMAGE IF LABEL VISIBLE
background: url(path/to/star/sprite.png) 0 0 no-repeat; <-- THIS POSITION IS UNCHECKED/UNSELECTED
}
.starz:not(#ie8) input:checked+label {
background-position: SHOW SELECTED STAR PART;
}
//if label visible, do something to make it obvious to keyboarders that they're focussed on it
.starz:not(#ie8) input:focus+label {
color: #00f;
}
//if no label, either have a sprite image part for radio-is-focussed, or draw an outline around it, or something!
If you have disableds, then you’ll add background positions for disabled-unchecked and disabled-checked states.
In addition to this, I have even m0aR code for when mouse is detected like
.mouseDetected .starz:not(#ie8) input:focus+label {
outline or border or whatever we set: 0;
}
This might be a must if there’s no visible label and you’re using a star colour to show that it’s focussed on, because in something like Firefox the checked state won’t show, only the focussed state! So I’d like an outline: 2px solid #somecolour myself.
This right here is pretty close to hitting everyone nicely.
Because the star is an image or image sprite, this doesn’t scale on zoom. SVG and em widths could maybe help this, but I have no good stories about SVG to share yet.
This also fails if the image doesn’t load for some reason. Detection of image loading and removing the styles could help, but I have no good stories of content-negotiation to share yet.
Because the radio button is the usual available control, it’s accessible to everyone as much as regular ones are, because this is a regular radio button.
The label, even if you took the span text and hid it, is available to anyone with scripts off/user stylesheets, screen readers, stuff like Dragon, etc.
The radio button can give its state and whether it’s being focussed on to the browser, who can pass that on to anything asking for it. So a screen reader user for example knows if “Mark as important” is checked or not.
The :not(#ie8) thing is because IE8 doesn’t know the :checked css state. However, if you’re javascripting this stuff, you could add a class of .checked instead and then you don’t need the nots. Me, since I do this for graphics monkeys, I let IE8 just look normal.
Hope this helps.
@Francky: “If you use a background-image for the star (in order to get the hover-effect), then there is no foreground-image to hang on the alt=“Marked as Important” / alt=“Marked as Normal”.
To get the hook, you can have a transparent image as foreground-image: that can have the Alt.”
I do this all the time with graphics-failures insisting on thuper-thpecial submit images:
<input type=“image” src=“path/to/trans.png” width=“bg image width” height=“bg image height” alt=“SEARCH”>
input[type=image] {
bg: teh bg image;
}
input[type=image]:focus, input[type=image]:active {
bg-position: wuzzup;
}
input[type=image]:hover {
bg-position: lawlz;
}
It’s clunky but if it’s already built into your setup it seems to be okay. It does mean 2 requests, but you can reuse the trans anywhere and let the browser stretch it into the needed dimensions.
Back when I was young and stupid, instead of just being stupid, I used to make different-sized trans images. Because, wut.
