HTML radio buttons: hide bullets

javascript html css progressive-enhancement graceful-degradation
whamsicore picture whamsicore · Mar 2, 2011 · Viewed 19.4k times · Source

I want a particular form component to act as radio buttons (only one option may be selected at a time). I do not want the radio bullets to show, however, opting for alternative presentational methods such as high light selected, or some other method. This will allow for graceful degradation: if the user browser does not support Javascript it will just degrade to basic radio buttons. I am wish to hide the bullet buttons through Javascript or CSS. Anyone know how? thanks.

Answer

aross picture aross · Apr 2, 2013

Just the bit of hiding the radio buttons (without losing accessibility, of course) can be done with the following CSS:

input[type="radio"] {
    left: -999em;
    position: absolute;
}

Using opacity: 0; isn't ideal, as the button is still there, taking up space in the page. Positioning it out of view is the way to go.

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More
Failed to load resource: the server responded with a status of 404 (Not Found)

I can't solve my link problem. Could you help on to this to link CSS and JS File? CSS: <link href="../Jquery/jquery.multiselect.css" rel="stylesheet"/> <link href="../Jquery/style.css" rel="stylesheet" /> <link …

Read More