As you can see here: http://www.realmarketingllc.com/order/ - scroll to theme options I have three radio buttons, with images as their selection fields. I would like to hide the radio buttons though. I currently have it set-up to where the selected images is outlined, and this needs to be kept so that the user knows which option they have selected. Additionally, I would like them all displayed side by side. I know this is possible via CSS. Thanks for any help! In summary: - Hide Radio Buttons - Retain Outline Effect - Display in-line
Hide the radio buttons underneath the images, and make sure the images are in LABEL's so that clicking the image automatically selects the INPUT. You WILL need scripting assistance to show that the INPUT is selected on the label, as CSS cannot do that on it's own. Though really, that's the type of ****ing around with form elements that piddles on accessibility from on-high. Treads into the area of "just don't do it" on websites; like 99% of the crap people throw scripting at forms to do... just like putting form INPUT and LABEL's into a unordered list for no reason, using DIV instead of fieldset, throwing classes at elements for no good reason, using single quotes in the markup because your underlying PHP and/or ASP is probably badly coded, putting extra DIV around FORM for no good reason since FORM is a perfectly good block-level container, tables for layout, colgroup on a single column table, table around a single column, improper use of labels, uselessly vague and cryptic NAME attributes, wasteful/pointless VALUE and TABINDEX attributes, H2 doing LEGEND's job, and dozen other malformed/badly written bits of markup you have in there resulting in wasting 9k on a inaccessible/improper form (filled with HTML 5 bloat) on something that should only need around 6k or less written properly. Do I even want to know what steaming pile of form generation software made that markup? I'm assuming it was some sort of tool since much akin to symmetrical book stacking and the Philadelphia mass turbulence of 1947... No human being... Oh hey look, it's a turdpress plugin, I'm so shocked. Exactly what I mean by 'nube predation' and "incompetence of pretty much everyone making extensions for Wordpress". Automated tools can't even build something that has rules and semantic tags properly, so surprising.
Now that your rage is over, clearly I've already got it figured out. Beside theme selection, you can see my image selections, with outline. Thanks anyways.
Alignment is busted here in Opera... and IE, I suspect that's because you're trying to use the radio buttons for the border via their style, when they do not get style the same way across different browsers; Which is why as a rule trying to style form elements is a train wreck better off left not done. Especially with 'hidden' meaning you can't keyboard navigate to them... meaning people on screen readers can't use them either -- that's why I was saying hide them UNDER the images -- as opposed to display:none or visibility:hidden... as neither of those are accessible. (see why most every dropdown menu that's worth a flying purple fish doesn't use them either) Also keep in mind your code won't work at all IE8/lower... if you care... (a lot of people don't... I say telling 15% to go plow themselves doesn't seem all that bright)