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

Html – Open radio button with just css

I’m trying to make a radio button open with css:
I have a radio button1 and a radio button2.
In radio button2 l have a content that I would like to highlight.
In the radio button1 with css target and in the html –
<a href="#example"> - <a>
highlight in the radio button2
<div id="example"> : </div>
But I can’t, the redio button doesn’t click itself, and I can’t use js.
ideas?

Tags:

2

Answers


  1. 0

    I’d be glad to help you achieve the desired radio button behaviour with CSS, but directly highlighting content based on the selected radio button state using pure CSS isn’t possible. Here’s a solution that combines CSS for styling and the :checked pseudo-class for conditional visibility:

    #example {
  display: none; /* Initially hide the content */
}

input[type="radio"]:checked + #example {
  display: block; /* Show the content only when radio2 is checked */
  background-color: lightblue; /* Highlight the content */
}
    <input type="radio" id="radio1" name="radio-group">
<label for="radio1">Radio Button 1</label>

<input type="radio" id="radio2" name="radio-group" checked>
<label for="radio2">Radio Button 2</label>

<div id="example">This is the content to highlight.</div>
    Login or Signup to reply.
  2. 0

    If you want to style a radio button based on its checked state, you can use the :checked pseudo-class in CSS. However, you cannot make a radio button "click itself" or change its checked state using only CSS or HTML. This type of behavior requires JavaScript or a similar scripting language. CSS is a styling language and doesn’t have the capability to trigger click events or change the state of form elements.

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

Back To Top
Search