CSS Checkboxes & Radio Buttons When Input Is Inside Label

Labels, checkboxes and radio buttons

The first part of Ssollinger's answer is correct:

The code should be:

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
</fieldset>

When assistive technology hits the male radio button, most will read as: "Gender: male radio button 1 of 2 not selected."

Then you could use CSS on the fieldset, legend, the labels and inputs. If memory serves correctly fieldsets can be a bear to style, so i might end up adding a <div> to it:

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
  <legend>Gender</legend>
  <div>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
  </div>
</fieldset>

Adding this <div> has no accessibility implications.

Like in the comment in ssollinger's answer, you could dump the fieldset and legend approach, but you would need to build everything to make it accessible, an example of a build out

How do I make long labels in checkboxes and radio buttons wrap AND indent appropriately using CSS?

Persjin was close.

Put the checkbox in the label. Make the label a block element, give it position:relative so the child elements are positioned with respect to it. Give the label some left padding, then position the checkbox hard left.

label {  position:relative;  padding-left:2.5ch;  display: block;  margin-bottom: 5px;}
label > [type=checkbox] {  position: absolute;  left: 0;}

<label>  <input type="checkbox"/>  Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here </label><label>  <input type="checkbox"/>  More Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here </label>

css - Input radio button to target outter label when checked

You should use JS.

When input element is inside the label then we do not need id on the element and 'for' attribute on the label, but when it is outside we need it.

<label>
  Foo
  <input name="foo" type="checkbox" />
</label>

Based on your HTML Code, To alter the styling of the label, would require a selector that affected the parent, which currently isn't possible.
Why? https://css-tricks.com/parent-selectors-in-css/

<input id="foo" name="foo" type="checkbox" />
<label for="foo">Foo</label>

So, to select the label of the :checked input, we need the label to be adjacent, not the parent.

But in your code, HTML's label and input is implicit connecting. So I think the solution is to use JS.

let form = document.querySelector("form");

form.addEventListener("change", (event) => {
  let target = event.target;
  let targetParent = target.parentElement;

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

.switch-field {
  display: flex;
  margin-bottom: 36px;
  overflow: hidden;
}

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding: 8px 16px;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field label.checked {
  background-color: #a5dc86;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

<form class="form">
  <div class="switch-field">
    <label class="checked">
      <input type="radio" name="switch-two" value="yes" checked />
      One
    </label>
    <label>
      <input type="radio" name="switch-two" value="maybe" />
      Two
    </label>
    <label>
      <input type="radio" name="switch-two" value="no" />
      Three
    </label>
  </div>
</form>

CSS - How to Style a Selected Radio Buttons Label?

.radio-toolbar input[type="radio"] {  display: none;}
.radio-toolbar label {  display: inline-block;  background-color: #ddd;  padding: 4px 11px;  font-family: Arial;  font-size: 16px;  cursor: pointer;}
.radio-toolbar input[type="radio"]:checked+label {  background-color: #bbb;}

<div class="radio-toolbar">  <input type="radio" id="radio1" name="radios" value="all" checked>  <label for="radio1">All</label>
  <input type="radio" id="radio2" name="radios" value="false">  <label for="radio2">Open</label>
  <input type="radio" id="radio3" name="radios" value="true">  <label for="radio3">Archived</label></div>

CSS for a checked radio button's label

Since there is no previous selector in CSS, you will have to move the input element before label and use the adjacent sibling(+) selector to select the label when input is :checked.

input[type="radio"]:checked + label {
  background: #000;
}

---

Updated Fiddle

/* Clean up the lists styles */
ul.accordion {  list-style: none;  margin: 0;  padding: 0;}/* Hide the radio buttons */
/* These are what allow us to toggle content panes */
ul.accordion input[type='radio'] {  display: none;}/* Give each content pane some styles */
ul.accordion li {  background-color: #fff;  border-bottom: 1px solid #DDDDDD;}/* Make the main tab look more clickable */
ul.accordion label {  background-color: #666666;  color: #FFFFFF;  display: block;  padding: 10px;  font-size: 16px;  font-weight: 700;}/* Set up the div that will show and hide */
ul.accordion div.content {  overflow: hidden;  padding: 0 20px;  display: none;}/* Show the content boxes when the radio buttons are checked */
ul.accordion input[type='radio']:checked + label + div.content {  display: block;}input[type="radio"]:checked + label {  background: #000;}body {  margin: 0;}

<ul class="accordion">  <li>    <input type="radio" name="a" id="q-1" checked="checked" />    <label for="q-1">Content 1</label>    <div class='content'>      <p>Content 1 blah blah blah blah</p>    </div>  </li>  <li>    <input type="radio" name="a" id="q-2" />    <label for="q-2">Content 2</label>    <div class='content'>      <p>Content 2 blah blah blah blah</p>    </div>  </li></ul>

Format all labels after a checkbox and radio button with css selector

input[type="radio"] label is looking for a label that's a child of an input[type=radio] you want:

input[type="radio"] + label

for an adjacent sibling label

---

Related Topics