I am trying to customize radio buttons with my css .. I have it half way working only they don't perform like radio btn

Question

the radio buttons work but they don't act like normal radio buttons if u click u can't click back and forth between only one click then I would have to refresh the page for them to work again.

     input[type="radio"] {
         -webkit-appearance: none;

     }

     input[type^="radio"]:before {
         display: inline-block;
         -webkit-appearance: none;
         border: 2px solid rgb(141, 214, 205);
         background-color: rgb(255, 217, 179);
         content: " ";
         border-radius: 20px;
         vertical-align: middle;
         text-align: center;
         width: 17px;
         height: 17px;
     }

      input[type^="radio"]:hover:before {

         -webkit-appearance: none;
         display: inline-block;
         border: 1px solid rgb(141, 214, 205);
         background-color: rgb(141, 214, 205);
         border-radius: 20px;
         content: " ";
         width: 17px;
         height: 17px;
     }

     input[type^="radio"]:checked:before {
         -webkit-appearance: none;


         display: inline-block;
         border: 1px solid rgb(37,22,82);
         background-color: rgb(37,22,82);
         font-size: 16px;
         font-weight: bold;
         text-align: center;
          vertical-align: middle;
         content: ".";
         color: rgb(255, 217, 179);
         border-radius: 25px;
         width: 17px;
         height: 17px;
     }
   ```css

 can someone please help.

Answer 1 · 2016-03-31T18:16:56Z

March 31, 2016 6:16pm

Well, the first thing that jumps out at me is that the radio buttons don't have the same name attribute. Both radio buttons need to have the same name. That will make them function as a group. But also, the "for" attribute on the labels need to match the corresponding radio's "id" attribute. There shouldn't be an id on the label itself.

<div id="buttons">
     <label for="html">HTML</label>
     <input type="radio" id="html" name="format">
     <label for="plain">Plain Text</label>
     <input type="radio" id="plain" name="format">
</div>

Answer 2 · 2016-03-31T17:21:03Z

March 31, 2016 5:21pm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/grey_Poupon.css">
<title>THE CODE REVIEW</title>
</head>

<body>

<div id="wrap">

<header class="main_header">
<h1 class="title">The Code Review</h1>

 <div class="main_head_info">
 <h3 class="sub_title">Signup for our newsletter</h3>

 <p>Get the latest news on how your code is doing in your inbox</p>

 </div>
 </header>

 <div class="contains_1">

    <h3 class="sub_title" id="con_info">Contact Information</h3>

  <label class="lab">Full Name</label>
 <input type="text" id="fullname" name="Full Name" placeholder="required" required="required">

    <label class="lab">Email Address</label>
 <input type="text" id="email" name="Email Address" placeholder="required" required="required">

   <label class="lab">Phone</label>
   <input type="text" id="phone" name="Phone Number" placeholder="absolutely" required="required">

    <fieldset id="mailfield">
   <legend>Mailing Info</legend>
   <label class="lab">Street Address</label>
   <input type="text" id="address" name="Street Address" placeholder="optional" required="required" class="data">

   <label class="lab">City</label>
   <input type="text" id="city" name="City" placeholder="optional" required="required" class="data">


   <select name="states">
   <option value="choose state">Choose State</option>
   <option value="new york">New York</option>
   <option value="new jersey">New Jersey</option>
   </select>  


    <label class="zip">Zip Code</label>
    <input type="text" id="zip" name="Zipcode" placeholder="optional" required="required"> 
     </fieldset>
    </div>

     <div class="contains_2">


   <h3 class="sub_title">Newsletter</h3>

   <fieldset id="field_2">
         <legend>Select the newsletters you would like to recieve</legend>
   <label for="HTML News" id="star" class="ch">HTML News</label>
   <input type="checkbox" id="html" name="HTML News">


     <label for="CSS News" class="ch">CSS News</label>
  <input type="checkbox" id="css" name="CSS News">

   <label for="Javascript News" class="ch">Javascript News</label>
  <input type="checkbox" id="js" name="Javascript News">

  </fieldset>

  <h5 class="check_ops">Newsletter format</h5>

            <div id="buttons">
            <label for="html" id="htmlbu">HTML</label>
           <input type="radio" id="htmlbu" name="HTML">
            <label for="Plain Text" id="plain">Plain Text</label>
         <input type="radio" id="plain" name="Plain Text">

             </div>

 </div>

   <footer class="main_footer">

   <p>Other topics you'd like to hear about</p>

    <textarea name="user_con" id="user_con" cols="45" rows="8">
    </textarea>

  <input type="submit" name="submit" id="submit" value="Sign Up">

        <h5 class="copyright">Copyright The Code Review</h5>

    </footer>


</div>
</body>
</html>
```html

the html .... I have half way working. I just don't understand why I was able to do the checkbox easy but when I came to 
radio buttons ... it seems as if I half to do something extra to get them to function correctly.

Answer 3 · 2016-03-31T23:07:54Z

March 31, 2016 11:07pm

Thank you oh so much! .. I can't believe thats all it took. I knew it had to be something small. Thanks anyway and happy codingsssah!

Welcome to the Treehouse Community

Looking to learn something new?

Le Var Range

Le Var Range

I am trying to customize radio buttons with my css .. I have it half way working only they don't perform like radio btn

David Bath

David Bath

3 Answers

David Bath

David Bath

Le Var Range

Le Var Range

Le Var Range

Le Var Range