Skip navigation
NessaFrankling
Currently Being Moderated

Help with styling radio buttons

Aug 6, 2012 11:44 AM

Tags: #cs5 #help #adobe #cs5.5 #dreamweaver #css #styles #html5 #dw

Hi can anyone tell me if its possible to add a vorder colour and a background to the selected radio button and text on this website http://62.6.176.22/products/leaflets.aspx?Id=145399&Key=F8FA69A7-4AC5- 4986-97F3-6C8C9520FA87. This is a site which is supplied to us and we can only edit the CSS with our own styles but not the code. Any pointers will be much appreciated

 
Replies
  • Currently Being Moderated
    Aug 6, 2012 12:08 PM   in reply to NessaFrankling

    Trying to style form elements is like nailing jelly to the wall.  Each browser has a different interpretation for how these elements should look.  As a result, you will never achieve any uniformity in rendering.  I'd move to the next project if I were you....

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 12:16 PM   in reply to MurraySummers

    Murray *ACP* wrote:

     

    Trying to style form elements is like nailing jelly to the wall. 

     

    The accuracy of this statement has officially blown my mind.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 12:17 PM   in reply to Jon Fritz II

    There are some things you can do to forms that are almost uniform across 1 or 2 versions of each browser.

     

    What were you hoping to do?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 12:40 PM   in reply to NessaFrankling

    Sorry, that's not what a:active is for (though it sounds like it). a:active only shows up in some browsers when the link affected is clicked and held down. It's not for setting any kind of persistent change in CSS.

     

    Unfortunately, I don't think you can do what you want without the use of Javascript to control the css of elements within the page. You won't be able to do it without changing the page's code.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 2:03 PM   in reply to NessaFrankling

    Actually...

     

    I may have spoken too soon.

     

    I've been doing some playing around and came up with this. Is this kind-of what you're looking for?

     

    <!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" />

    <title>Untitled Document</title>

    <style>

    input[type="radio"] {

        display:block;

        float:left;

        height:20px;

        width:20px;

    }

     

    label {

        display:block;

        background-color:#bbb;

        padding:5px 10px;

        font-family:Verdana;

        font-size:12px;

        border:1px solid #bbb;

    }

     

    input[type="radio"]:checked + label {

        background-color:#6F6;

        border:1px solid green;

    }

    </style>

    </head>

    <body>

    <div style="margin:auto; width:552px;">

    <div>

     

        <input type="radio" id="radio1" name="radios" value="value1" checked>

        <label for="radio1">Button1 - Notes would go here (this is the radio button Label)</label>

     

        <input type="radio" id="radio2" name="radios" value="value2">

        <label for="radio2">Button2 - Notes would go here (this is the radio button Label)</label>

     

        <input type="radio" id="radio3" name="radios" value="value3">

        <label for="radio3">Button3 - Notes would go here (this is the radio button Label)</label>

     

    </div>

    </div>

    </body>

    </html>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points