CODEWITHSUNDEEP
htmlcss
Watermelonnn
Watermelonnn

Reputation: 13

How connect inputs with another selector in HTML/CSS?

I need to change <p> color by checking one of the buttons:

<div class="textstyle">
    <span class="textarea">
        <p class="text">Some text here</p>
    </span>
    <div class="buttons">
        <input type="radio" id="red" name="textbutton" checked/><label for="red">Red</label>
        <input type="radio" id="blue" name="textbutton"/><label for="blue">Blue</label>
        <input type="radio" id="green" name="textbutton"/><label for="green">Green</label>
    </div>
</div>

So, buttons and paragraph have one grandparent. How can I change this structure or what CSS rules should I add to make this work?

UPD: without JS or jQuery

Upvotes: 1

Views: 710

Answers (4)

Ire
Ire

Reputation: 29

Considering your original html structures, no way to get parent div element of input, and relative p.text element with pure css, now.

Is there a CSS parent selector?

Using Javascript approach!

Upvotes: 1

Goran Stoyanov
Goran Stoyanov

Reputation: 2311

I'm not sure how and if this can be done with CSS only without altering the original HTML structure but here's an approach with Javascript:

//selects the paragraph tag
const paragraph = document.querySelector('p.text');
//selects all radio inputs
const checkboxes = document.querySelectorAll('input[type=radio]');

//adds a click event listener to each radio input which will trigger a change of the paragraph style property which matches the radio buton id (ex. red text color after clicking the radio input with id=red).
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', (e) => {
    paragraph.style.color = e.target.id;
  });
});
<div class="textstyle">
    <span class="textarea">
        <p class="text">Some text here</p>
    </span>
    <div class="buttons">
        <input type="radio" id="red" name="textbutton"/><label for="red">Red</label>
        <input type="radio" id="blue" name="textbutton"/><label for="blue">Blue</label>
        <input type="radio" id="green" name="textbutton"/><label for="green">Green</label>
    </div>
</div>

Upvotes: 0

Viral
Viral

Reputation: 949

Here is one way you can achieve this with HTML/CSS only.

input ~ p Selects every <p> element that are preceded by a <input> element.

input:checked Selects every checked <input> element. In our case, we are using radio buttons so we can only select on at a time.

input#red:checked ~ .text {
color: red;
}
input#blue:checked ~ .text {
color: blue;
}
input#green:checked ~ .text {
color: green;
}
<div class="textstyle">
    <div class="buttons">
        <input type="radio" id="red" name="textbutton" checked/><label for="red">Red</label>
        <input type="radio" id="blue" name="textbutton"/><label for="blue">Blue</label>
        <input type="radio" id="green" name="textbutton"/><label for="green">Green</label>
         <p class="text">Some text here</p>
    </div>
</div>

Upvotes: 7

N.SH
N.SH

Reputation: 693

this codes maybe help you : 

$('input[name="textbutton"]').on('change' , function(){
var _color = $(this).attr('id');
$('.text').addClass(_color);
});

and according to p element class name you can give style to your element

Upvotes: 0

Related Questions