Replacing radio buttons with <a>s?

simisker

simisker

simisker

Soldato
Joined
27 Oct 2002
Posts
3,540
Location
At the fulcrum of humdrum
I need to create a form that uses three radio buttons.

I need it to hide the OS's radio buttons, and replace them with CSS-styled <a>s. Or <div>s. But not images.

Each <a> needs to have a different style.

JQuery-based solutions are fine, but I can't write from scratch.

Anyone got any ideas or links?

I can't seem to find anything relevant, amazingly. Might be me having a brainfart. It's definitely possible :D
 
Cheers as ever, Trip.

However, that doesn't really do what I want it to do.

I really want each radio button to act as an anchor, with :hover and :active states.

Imagine a "traffic light" set of three buttons; one red, one amber and one green. I need the default state to be, say, desaturated, a hover state to be something really highlighty, and an active/selected/checked state to be a bright version, with e.g. a CSS border applied.

The big problem I'm having is that radio buttons obviously don't have a hover state. Hence the mention of anchors.

Ta, though :)
 
Might use jqtransform myself - seems ridiculously straightforward. Wish I knew more about JS/could write from scratch, see more and more nifty stuff every day.
 
simisker said:
Cheers as ever, Trip.
However, that doesn't really do what I want it to do.
I really want each radio button to act as an anchor, with :hover and :active states.
Click to expand...

You should have looked at it a bit more as it does exactly what you want. It replaces your radio buttons with anchors. The demo doesn't have hover or active states on them but there was nothing stopping you from adding your own. The selected state itself is just a background image shift on the a tag. :)
 
Last edited:
Russinating said:
Might use jqtransform myself - seems ridiculously straightforward. Wish I knew more about JS/could write from scratch, see more and more nifty stuff every day.
Click to expand...

jQuery is really easy to learn. It gets a lot more tricky with more advanced stuff but I find I'm able to learn things as I need to as there are so many resources available.

There's also no need to reinvent the wheel so if there is a plugin out there which does what you want, use it instead of coding your own.
 
Tripnologist said:
You should have looked at it a bit more as it does exactly what you want. It replaces your radio buttons with anchors. The demo doesn't have hover or active states on them but there was nothing stopping you from adding your own. The selected state itself is just a background image shift on the a tag. :)
Click to expand...
I didn't like its out-of-the-box reliance on background images; the solution I found relied on the labels out of the box, making it instantly more attractive to me. And because jqtransform also addressed other form elements, it would have been needlessly heavier unless I started semi-blindly hacking around in the .js.

Maybe for a later project, but not this one.
 
Last edited:
Replaced all the forms in my project with jqtransform and integrated them with jQuery Validate which I was already using. Had to make a few changes in both the transform CSS and JS files as both scripts uses labels in different ways, and also radios/checks/selects being converted to <a>'s meant they looked terrible with my site-wide <a> styling (bottom border etc).

Anyway, all looks lovely now :).
 
Just realised that JQTransform is not at all cross-browser compliant - it looks totally different (and wrong) in Firefox and IE (but looks fine in Chrome, which is my primary browser). I've tried for a while to find a middle ground but can't, so do you know of any other similar plugins?
 
Tripnologist said:
You've done something wrong then as it looks near identical in IE6, IE8, FF, Opera and Chrome for me.
Click to expand...

I thought that too, but the same thing happens with the demo form on dfc-e.com.

Screenshot:
jqtransform.jpg


As you can see, Chrome and IE are perfect, though IE is slightly lower, but Firefox is totally wrong - text is too low and the blinking cursor is massive. All browsers fully updated (including FF - 3.6.8).

Tried playing with padding/margins in my own CSS to no avail.
 
Ahhhh, see, this is where you got me thinking it was something much worse.

Russinating said:
it looks totally different (and wrong) in Firefox and IE (but looks fine in Chrome, which is my primary browser).
Click to expand...


That's something which should be easy to fix.
Find .jqTransformInputInner div input > remove line-height and height > add top and bottom padding of 8px.
 
Tripnologist said:
Ahhhh, see, this is where you got me thinking it was something much worse.




That's something which should be easy to fix.
Find .jqTransformInputInner div input > remove line-height and height > add top and bottom padding of 8px.
Click to expand...

At work at the moment and the latest build's on my laptop at home, but I'll try this this evening and let you know :). If it's that simple then damn... I want an hour of my life back :p.
 
I've just tested it and it fixes it in IE and Firefox, but it's not quite perfect in safari/chrome. It sits a little too low due to some specific css for chrome/safari which will need to be fiddled with. The only reason the guy who made this plugin has done so is to remove the default form element outlines for chrome/safari, which now that I've noticed it, I would undo.

I'll have to amend it for my own personal use so can give you the css once I've done so if you'd like. Should only take 15 mins or so once I have some time later tonight.
 
As well as the change your posted I appended my jqtransform CSS file with:

Code: 
@media screen and (-webkit-min-device-pixel-ratio:0) {
.jqTransformInputInner div input {
	padding: 8px 0px 0px 0px;
}
}

Seems to work a treat in Chrome, but can't test in Safari here. Any good? If so, thanks for all your help as always Trip.

Oh, one more thing though. It seems hotkey selections are disabled with jqtransform. Is this a generic jquery problem or is there a work around? For example, on a list of regions, pressing S doesn't skip to Shropshire.

Oh and another problem, I'm using jQuery UI too and using the datepicker() function on a form. For some strange reason though, the calendar popout displays underneath the jqtransform select element but above all other elements (as it should). Any ideas?

Screenshot (before and after):

datepicker.jpg


The jQuery UI JS file is far too stripped/compressed for me to have a play with z-index's or something similar!
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom