How can I make multi-line, vertically and horizontally aligned labels for radio buttons in HTML Form

Posted by Patrick Klingemann on Stack Overflow See other posts from Stack Overflow or by Patrick Klingemann
Published on 2009-05-26T16:44:38Z Indexed on 2010/04/01 6:53 UTC
Read the original article Hit count: 329

Filed under:

html

|

radiobutton

|

label

|

cross-browser

|

css

Assuming the following markup:

<fieldset>
    <legend>Radio Buttons</legend>
    <ol>
        <li>
            <input type="radio" id="x">
            <label for="x"><!-- Insert multi-line markup here --></label>
        </li>
        <li>
            <input type="radio" id="x">
            <label for="x"><!-- Insert multi-line markup here --></label>
        </li>
    </ol>
</fieldset>

How do I style radio button labels so that they look like the following in most browsers (IE6+, FF, Safari, Chrome:

Radio Button Labels

© Stack Overflow or respective owner

Related posts about html

Install usblib package - Ubuntu

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
I need the package libusb for another package I am installing. I tried the following which seemed to install the package, sudo apt-get install libusb-dev but when I try to install the other package I get, configure: error: Package requirements (libusb-1.0 >= 0.9.1) were not met: No package… >>> More
Prevent malicious vulnerability scan increasing load on a server

as seen on Server Fault - Search for 'Server Fault'
Hi all, this week we have been suffering some malicious vulnerability scans to our servers, increasing the load on them, making them nearly unusable. The attack is easy to defend, just blocking the offending ip, but only after discovering it. Is there any form of prevent it? Is it normal that… >>> More
can't install psycopg2 in my env on mac os x lion

as seen on Server Fault - Search for 'Server Fault'
I tried install psycopg2 via pip in my virtual env, but got this error: ld: library not found for -lpq (full log here: http://pastebin.com/XdmGyJ4u ) I tried install postgres 9.1 from .dmg and via port, (gksks)iMac-Alexander:~ lorddaedra$ locate libpq /Developer/SDKs/MacOSX10.7.sdk/usr/include/libpq /Developer/SDKs/MacOSX10… >>> More
Bitnami redmine error SVN

as seen on Server Fault - Search for 'Server Fault'
I'm installing the Bitnami Redmine stack (redmine + subversion). Firstly I install configure and test it locally (Ubuntu 14.04 LTS). And everything is OK. I install Bitnami stack on server (Red Hat 4.4.7-4) and configure SVN. I commit files into SVN and connect project into Redmine with SVN repository… >>> More
Can the .htaccess file slow down a website to a crawl? If so, are there better ways to solve these problems with different rewrite rules and such?

as seen on Pro Webmasters - Search for 'Pro Webmasters'
here is my htaccess file...... RewriteCond %{REQUEST_URI} ^/patients/billing/FAQ_billing\.html$ [OR] RewriteCond %{REQUEST_URI} ^/patients/billing/getintouch\.html$ RewriteRule ^patients/billing/(.*)\.html$ $1.php [L,NC] RewriteCond %{REQUEST_URI} ^/patients/findadoctor/a\.html$ [OR] RewriteCond… >>> More

Related posts about radiobutton

WPF Radiobutton equivalent

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the WPF equivalent for WinForms radio button CheckedChanged? I have your basic 2 radio button set up, where when one is selected a textbox is enabled and when the other is selected it is disabled. For the time being I was using RadioButton_Checked, except, I set IsChecked true for one button… >>> More
creating a radiobutton control in vb.net

as seen on Stack Overflow - Search for 'Stack Overflow'
ok this is my code in vb.net behind where i am creating the radiobutton - TD = New HtmlTableCell Dim rdb As New RadioButton() rdb.ID = "rdb_ads_" & DR("ID") TD.Controls.Add(rdb) TR.Cells.Add(TD) It displays the radiobutton, but… >>> More
radiobutton not working in allkeys

as seen on Stack Overflow - Search for 'Stack Overflow'
i have a radiobutton built throught my code. this is the code for that. dim 1 as intereger = 0 Dim rd As New RadioButton rd.ID = "rd_" & i rd.GroupName = "rd_g" TD.Controls.Add(rd) i = i+1 the reason i gave groupname is so that when… >>> More
RadioButton text alignment

as seen on Stack Overflow - Search for 'Stack Overflow'
For some reason the text on each of my RadioButtons is raised, almost to the level of a superscript (ok maybe half way there). How do I set the text to align so that if I could draw a line through the center of the button and have it intersect with the center point of the text? * Button1 * Button2 >>> More
Radio Button with html.radiobutton ASP.NET MVC

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello, I'm a newbie to all this ASP.NET MVC stuff, and I was making some tests for my project. I wanted to ask how is it possible to introduce a javascript function call from the html.radiobutton function. For example, how would you declare this: <input type="radio" name = "Kingdom" value = "All"… >>> More