Style label with radiobutton inside

Question

I have a label I need styled depending on the state of the checkbox inside. Unfortunately I am constrained about changing the html structure! (Last resort is a javascriptsolution).

Is it even possible with a html structure as below

.like-this {
  border: 1px solid black;
  background: white;
  color: black;
  padding: 2px 4px;
}
.selected {
   background: red;
  color: white;
}

<label>
  <input type="radio" name="field_123" value="Yes" class="Radio-Button">
  I need same border
</label>
<label>
  <input type="radio" name="field_123" value="No" class="Radio-Button"">
  I need same border
</label>
<br/>
<span class="like-this">Not Selected</span>
<span class="like-this selected">Selected</span>

See https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Nenad Vracar, Mar 08 '18 at 13:37

score 2 · Accepted Answer · answered Mar 09 '18 at 06:24

let form = document.querySelector( "form" );
form.addEventListener( "change", ( evt ) => {
  let trg = evt.target,
      trg_par = trg.parentElement;
  if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) {
    let prior = form.querySelector( 'label.checked input[name="' + trg.name + '"]' );
    if ( prior ) {
      prior.parentElement.classList.remove( "checked" );
    }
    trg_par.classList.add( "checked" );
  }
}, false );

label {
  background: #ddd;
  padding: 2px 10px 2px 0;
  border: 1px solid #000;
}
label.checked {
  background: #000;
  color: white;
}
input{display:none;}

<form>
<label>
  <input type="radio" name="field_123" value="Yes" class="Radio-Button">
  I need same border
</label>
<label>
  <input type="radio" name="field_123" value="No" class="Radio-Button"">
  I need same border
</label>
</form>

score 1 · Answer 2 · answered Mar 08 '18 at 14:02

1

input{display:none;}
label{
 border: 1px solid #ddd;
      cursor: pointer;
      padding: 5px 20px;
}
input[type="radio"]:checked + label{
background:#000;
color:#fff;
}

  <input type="radio" id="radio1" name="field_123" value="Yes" class="Radio-Button">
  <label for="radio1">I need same border</label>

  <input type="radio" id="radio2" name="field_123" value="No" class="Radio-Button"">
  <label for="radio2">I need same border</label>

answered Mar 08 '18 at 14:02

Pushparaj

1,010
8
22

thanks for your try, however I am not allowed to change the html structure, nor add ids due to using a CMS system. I can use css + javascript – Todilo Mar 08 '18 at 14:24

Style label with radiobutton inside

2 Answers2