Styling radio button separately from text field

HTML & CSS
1

In the forms I create, the spacing of the radio buttons is always really wide. When I change it to the proper width, the text fields change too. Due to my woeful knowledge of CSS, I don’t understand what part of this code applies only to the radio buttons, if any (pasted from Firebug):

.format_text input, #commentform input, #commentform textarea {
    border-width: 0.071em;
    padding: 0.214em;
    [B]width: 45%;[/B]
}
layout...-192911 (line 242)
input, textarea {
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
}
layout...-192911 (line 241)
input, textarea {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #EEEEEE;
    border-color: #AAAAAA #DDDDDD #DDDDDD #AAAAAA;
    border-style: solid;
    border-width: 1px;
    color: #444444;
    font-size: 1em;
}
style....-214517 (line 62)
* {
    margin: 0;
    padding: 0;
}

The bold 45% is what I was fiddling with. If I change it to 5%, the button spacing looks good, but the text fields shorten too. How can I change one independent of the other?

2

You can use attribute selectors, like this:

input[type=“radio”]

input[type=“text”]

input[type=“checkbox”]

input[type=“password”]

They aren’t supported by IE6, however, IE7 and above do support them.

3

Thank you for replying. I’m not sure how you mean. How do I incorporate those selectors in the CSS?

I was thinking it would be something like

.custom .button {
width: 5%;
}

or something like that. Am I going in the wrong direction?

4

Copy and paste the top declaration block so that you’ve got it twice.

In one of them, replace input with input[type=“text”], and set the width that you want text inputs to be.

In the other, replace input with input[type=“radio”], and set the width that you want radio buttons to be.

5

THANK YOU!!! Now whenever this arises, I can fix it myself. You guys are the best!

6

I wonder if I could prevail upon you with one more question. How do I get the radio buttons to stack vertically? I’m using the Contact Form 7 plugin, which is putting them all on one line, like this, so I can’t insert paragraphs between standard pitch and barn: [radio RoofStyle “Standard pitch” “Barn”]

Is there a way to do this?

7

We’d need to see the html to say how it should be done semantically but you could just set the radio to display:block and then it will create a new line.

Are you sure you shouldn’t be using labels rather than paragraphs if the text refers to the radio button?

8

Thanks! display:block did help except it stacked the text too. Which is probably why you’re mentioning labels. I’m not clear on labels vs. regular text in a form. I’m going to look into that next. You may hear from me again. :slight_smile:

Thanks for your help!

9

Hi,

You should associate labels with their form control for best accessibility.

Here’s a basic example.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.formtest {
    width:350px;
    margin:auto;
}
.formtest label {
    display:inline-block;
    vertical-align:middle;
    width:90px;
    text-align:right;
    margin:10px 0;
}
.formtest input {
    width:200px;
    margin:10px 0;
    vertical-align:middle;
}
.gender label{text-align:left;margin:0}
.gender input{width:auto;margin:0 10px 0 90px}
</style>
</head>
<body>
<form  class="formtest" id="form1" method="post" action="">
    <fieldset>
    <legend>Address Details</legend>
    <label for="firstname">First Name:</label>
    <input type="text" name="firstname" id="firstname" />
    <br />
    <label for="lastname">Last Name:</label>
    <input type="text" name="lastname" id="lastname" />
    <br />
    <label for="address1">Address 1:</label>
    <input type="text" name="address1" id="address1" />
    <br />
    <label for="address2">Address 2:</label>
    <input type="text" name="address2" id="address2" />
    <br />
    <label for="address3">Address  3:</label>
    <input type="text" name="address3" id="address3" />
    <br />
    <label for="address4">Address 4:</label>
    <input type="text" name="address4" id="address4" />
    <br />
    <label for="city">City:</label>
    <input type="text" name="City" id="city" />
    <br />
    <label for="state">State:</label>
    <input type="text" name="state" id="state" />
    <br />
    <label class="zip" for="zip">Zip:</label>
    <input type="text" name="zip" id="zip" />
    <br />
    <label for="tel">Telephone:</label>
    <input type="text" name="tel" id="tel" />
    <br />
    </fieldset>
    <fieldset class="gender">
    <legend>Enter Gender</legend>
    <input type="radio" name="radio" id="rad1" value="rad1" />
    <label for="rad1">Male</label>
    <br />
    <input type="radio" name="radio" id="rad2" value="rad2" />
    <label for="rad2">Female</label>
    <br />
    <input type="radio" name="radio" id="rad3" value="rad3" />
    <label for="rad3">Not sure</label>
    <br />
    </fieldset>
</form>
</body>
</html>