radio button color

Discussion in 'HTML & Website Design' started by bumbarov, Mar 15, 2012.

0
  1. #1
    How can be selected radio buttons that have a small color rectangle for text label?

    
<form action="" method="get">
<input type="radio" name="preferred_color" value="Red"/>
<input type="radio" name="preferred_color" value="Green" />
</form>
    PHP:

     
    bumbarov, Mar 15, 2012 IP
  2. web.seowrkshop

    web.seowrkshop Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you can use the select feature to make the radio button seleted.

    <input type="radio" name="preferred_color" value="Green" selected="selected"/>

    you can try this. If its not working then search from google like" how to make selected a radio button"
    then you will get easily these example.
     
    web.seowrkshop, Apr 27, 2012 IP
  3. MobileInternet

    MobileInternet Active Member

    Messages:
    365
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Thanks for this... used it myself.
     
    MobileInternet, Apr 27, 2012 IP
  4. 137th Gebirg

    137th Gebirg Active Member

    Messages:
    70
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    91
    #4
    First, make a small box next to the radio buttons - a simple 20x20px DIV layer with a unique ID tag. Then, on each radio button, you would have an onClick event handler to call a JavaScript function with the color value and the ID of the target DIV layer as the two arguments. The JavaScript function would look something like this:

    
<HTML>
  <HEAD>
    <SCRIPT TYPE="text/javascript">
      function changeColor(colorValue, targetDiv) {
        document.getElementById(targetDiv).style.backgroundColor = colorValue;
      }
    </SCRIPT>
  </HEAD>
  <BODY>
    <form action="" method="get">
      <input type="radio" name="preferred_color" ID="radioRed" value="#f00" onClick="changeColor(this.value, 'colorDiv');" /> <LABEL FOR="radioRed">Red</LABEL>
      <input type="radio" name="preferred_color" ID="radioGreen" value="#0f0" onClick="changeColor(this.value, 'colorDiv');" /> <LABEL FOR="radioGreen">Green</LABEL>
      <DIV ID="colorDiv" STYLE="width: 20px; height: 20px; border: 1px solid #000;"></DIV>
    </form>
  </BODY>
</HTML>
    Code (markup):
    Instead of using "red" and "green", I would use hex octets, but that's my own personal preference. If you do, make sure they are preceded by the hash-tag "#". Hope this helps!
     
    137th Gebirg, Apr 27, 2012 IP