Question 291850 in Html Question posted in
Some basic documentation can be found here.

capture input of element when toggled with radio button and display outside of parent with only html and css

Im not sure if im designing my solution correctly but essentially I have two radio inputs and when i select an option it displays the anchor tag .tick which is fine. now I have an achor tag called .some that where I need to put the value of the selected anchor tags href attribute in some. is this possible? p.s. needs to be html and css only. no javascript. do I need to re-design my solution?

<!DOCTYPE html>
<html>
<head>
<style>
.option .tick {
    display: none;
}

.option input:checked ~ .tick {
    display: inline;
}
#happy1:checked ~ .some:after {
  content: " (happy1)";
}

#happy2:checked ~ .some:after {
  content: " (happy2)";
}
</style>
</head>
<body>
    <div class="step1">
        <div class="row">
            <label class="option">
                Option 1
                <input type="radio" name="select" id="happy1">
                <a href="happy" class="tick">Happy 1</a>
            </label>
        </div>
        <div class="row">
            <label class="option">
                Option 2
                <input type="radio" name="select" id="happy2">
                <a href="happy" class="tick">Happy 2</a>
            </label>
        </div>
    </div>
    <div>
        <a href="linktosomething" class="some">Some</a>
    </div>
</body>
</html>

Im not sure how to go about doing this

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer after playing around abit. I used the :has() and :is() functions

    <div class="step1">
      <div class="row">
        <label class="option">
          Option 1
          <input type="radio" name="select" id="happy1"  class="tick1"/>
          <a href="happy1" class="tick">Happy 1</a>
        </label>
      </div>
      <div class="row">
        <label class="option">
          Option 2
          <input type="radio" name="select"  class="tick2" id="happy2" />
          <a href="happy2" class="tick">Happy 2</a>
        </label>
      </div>
    </div>
    <div>
      <a href="some" class="some"></a>
    </div>

    css:

    .option .tick {
        display: none;
      }

      .option input:checked ~ .tick {
        display: inline;
      }

      .some::after {
        content: " (default)";
      }

 body:has(#happy1:checked) ~ .some::after{
      content: "happy1";
     }
 body:has(:is(.tick1:checked)) .some::after{
      content: "sfdsf";
     }
    body:has(:is(.tick2:checked)) .some::after{
      content:"dvdfd"
     }

    https://codepen.io/riobyucr-the-styleful/pen/OJdENYd


  2. 0

    Without using JavaScript, you won’t be able to directly manipulate the content of an element based on user interactions. However, you can achieve a similar effect by leveraging the :checked pseudo-class and the general sibling combinator (~). Unfortunately, this approach has limitations, and it won’t allow you to directly set the href attribute of the anchor tag inside the .some element.

    Here’s a modified version of your code to illustrate a possible workaround:

    <!DOCTYPE html>
<html>
  <head>
    <style>
      .option .tick {
        display: none;
      }

      .option input:checked ~ .tick {
        display: inline;
      }

      .some:after {
        content: " (default)";
      }

      #happy1:checked ~ .some:after {
        content: " (" attr(href-happy1) ") happy1";
      }

      #happy2:checked ~ .some:after {
        content: " (" attr(href-happy2) ") happy2";
      }
    </style>
  </head>
  <body>
    <div class="step1">
      <div class="row">
        <label class="option">
          Option 1
          <input type="radio" name="select" id="happy1" />
          <a href="happy1" class="tick">Happy 1</a>
        </label>
      </div>
      <div class="row">
        <label class="option">
          Option 2
          <input type="radio" name="select" id="happy2" />
          <a href="happy2" class="tick">Happy 2</a>
        </label>
      </div>
    </div>
    <div>
      <a href="some" class="some"></a>
    </div>
  </body>
</html>

    In this example, I’ve added unique IDs (id="happy1" and id="happy2") to your radio inputs to make it easier to reference them in CSS. I’ve also modified the .some:after rules to set the content based on the state of the radio buttons.

    However, note that this solution has limitations, and it’s more of a workaround. The actual href attribute of the anchor tag won’t be dynamically updated without JavaScript. If JavaScript is an option, it would be a more straightforward and robust solution for this kind of dynamic behavior.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search