CODEWITHSUNDEEP
cssreactjs
Canovice
Canovice

Reputation: 10441

In CSS, selecting parent <label> for an <input> that is selected

Edit: apparently cant use <> braces or it hides names?...

I've seen a few variations of this question asked, however none of what I found fits my particular issue, which I think is a simple issue. I am creating the following radio button group in react:

    const myOptions = ["YTD", "Week", "Month", "Pre AS", "Post AS"]
    const myButtons =
        <form>
            <div className="radio-group">
                {myOptions.map((d, i) => {
                    return (
                        <label>
                            <input
                                type={"radio"}
                                value={myOptions[i]}
                                checked={timeframeNew === myOptions[i]}
                                onChange={this.handleTimeframeNewChange}
                            />
                            <span>{myOptions[i]}</span>
                        </label>
                    )
                })}
            </div>
        </form>;

and here is my current CSS for styling the buttons to look nice...

input[type=radio] { 
  position: absolute;
  visibility: hidden;
  display: none;
}

label {
  color: #333;
  background: #EEE;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 20px;
  border: 2px solid orange;
}

input[type=radio]:checked + label {
  color: red;
  background: #333;
}

label + input[type=radio] + label {
  border-left: solid 2px blue;
}

.radio-group {
  border: solid 2px green;
  display: inline-block;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
}

Unfortunately, the CSS is not working as intended. In particular, the following selection - input[type=radio]:checked + label does not work because there is no label immediately after an input. The only way so far I have been able to successfully get my react onChange handler function to work is by putting the input inside of the label, like this, and then returning the label in each .map loop.

*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...

So my question is, how how how can I, in CSS, grab the label that corresponds to the clicked input. I would like to change the entire label's color and background when it is / isn't clicked, so selecting the span does not help (since that only changes the texts color/background, not the whole label.

Thanks in advance!!

Upvotes: 0

Views: 809

Answers (3)

luopio
luopio

Reputation: 527

There is a CSS only way to do this with the :has-selector

Example:

<label>
  Option 1
  <input type="radio" name="foo" value="1" />
</label>

<label>
  Option 2
  <input type="radio" name="foo" value="2" />
</label>

label:has(input:checked) {
  background: red;
}

Upvotes: 2

RobertAKARobin
RobertAKARobin

Reputation: 4258

CSS can select child and sibling elements, but not parent elements. I often hide default radio buttons and checkboxes and create my own, like this:

.button-group{
  font-size:0; /*Prevents a space from occuring between buttons*/
}
.button-group input{
  position:absolute; 
  visibility:hidden; /* display:none causes some browsers to ignore the input altogether */
}
.button-group input+span{
  display:inline-block;
  line-height:20px;
  font-size:1rem;
  vertical-align:top;
  padding:0 10px;
  color:#000;
  border-left:1px solid #a00;
}
.button-group label:first-child input+span{
  border-radius:10px 0 0 10px;
  border-left:0;
}
.button-group label:last-child input+span{
  border-radius:0 10px 10px 0;
}
.button-group input:not(:checked)+span{
  background-color:#faa;
}
.button-group input:not(:checked)+span:hover{
  background-color:#f66;
}
input[type=radio]:checked+span{
  background-color:#f33;
}
<div class="button-group">
  <label>
    <input type="radio" value="1" name="myfield" />
    <span>Option 1</span>
  </label>

  <label>
    <input type="radio" value="2" name="myfield" />
    <span>Option 2</span>
  </label>

  <label>
    <input type="radio" value="3" name="myfield" />
    <span>Option 3</span>
  </label>
</div>

Upvotes: 2

Murilo Cruz
Murilo Cruz

Reputation: 2551

*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...

You can use <React.Fragment> <input /> <span /> </ReactFragment> to return multiple elements without rendering them inside a div or span

Upvotes: 1

Related Questions