Results 1 to 4 of 4

Thread: [CSS] Change RadioButton's Checked

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    [CSS] Change RadioButton's Checked

    So I am new to CSS3's animations and I'm not sure if I'm able to do what I want. Basically I want to make mimic traffic light using only CSS3. I was able to do it using JavaScript with the following code:
    HTML Code:
    <div id="trafficLight">
      <input checked name="light" type="radio" />
      <input name="light" type="radio" />
      <input name="light" type="radio" />
    </div>
    Code:
    #trafficLight {
      border: 1px solid black;
      display: inline-block;
      padding: 0;
      margin: 0;
    }
    
    input[type="radio"] {
      border: 1px solid black;
      border-radius: 50%;
      display: block;
      height: 50px;
      padding: 0;
      margin: 5px;
      width: 50px;
      -moz-appearance: none;
      -webkit-appearance: none;
    }
    
    input[type="radio"]:nth-child(1):checked {
      background-color: red;
    }
    
    input[type="radio"]:nth-child(2):checked {
      background-color: yellow;
    }
    
    input[type="radio"]:nth-child(3):checked {
      background-color: green;
    }
    Code:
    changeRed();
    
    function changeYellow() {
      document.getElementsByName("light")[1].checked = true;
      setTimeout(changeGreen, 1000);
    }
    
    function changeGreen() {
      document.getElementsByName("light")[2].checked = true;
      setTimeout(changeRed, 1000);
    }
    
    function changeRed() {
      document.getElementsByName("light")[0].checked = true;
      setTimeout(changeYellow, 1000);
    }
    However, using only CSS3 I've tried adding the following attributes:
    Code:
    input[type="radio"] {
      border: 1px solid black;
      border-radius: 50%;
      display: block;
      height: 50px;
      padding: 0;
      margin: 5px;
      width: 50px;
      -moz-appearance: none;
      -webkit-appearance: none;
      animation-name: changeChecked; /* here */
      animation-duration: 2s; /* here */
    }
    
    /* here */
    @keyframes changeChecked {
      from {checked: false;}
      to {checked: true;}
    }
    Am I able to even do what I'm trying to do?
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: [CSS] Change RadioButton's Checked

    https://css-tricks.com/almanac/selectors/c/checked/

    You can check the checked status with CSS but you can't change/modify/set it. You need JS to do that.

    I don't have any experience with CSS3 animations, so I could have missed something here.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  3. #3
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: [CSS] Change RadioButton's Checked

    Hi there dday9,

    check out the attachment, which contains an example of an U.K. traffic light.

    I don't know how that compares with the U.S.A. version, but it is CSS.
    Attached Files Attached Files


    ~ the original bald headed old fart ~

  4. #4

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: [CSS] Change RadioButton's Checked

    You crazy Brits

    Thank you, I'll check it out when I get home.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width