Radio Buttons stopped working when styled as button look like

Question

I have a problem I have styled my radio buttons. After style, these radio buttons stop working. I styled them as actual button looked like. Please let me know if there is any problem with the HTML or CSS. Many thanks in advance.

  .radio-toolbar {
  margin: 10px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
   width: 0;
   position: absolute;
  
}

.radio-toolbar span {
    display: inline-block;
    background-color: transparent;
    padding: 10px 20px;
    width: 30.33%;
    margin:5px 4px;
    font-size: 16px;
    border: 2px solid #bfbfbf;
    border-radius: 1px;
}

.radio-toolbar span:hover {
  background-color:#f79da9;
  color:#fff;
  transition:0.5s;
  cursor:pointer;
}

.radio-toolbar input[type="radio"]:focus + span {
    border: 2px dashed #444;
}

.radio-toolbar input[type="radio"]:checked + span {
    background-color: #bfb;
    border-color: #4c4;
}

<body>
                     <label>Time Zone: EST</label>
                  <p class="line-item-property__field radio-toolbar">
                    <input required type="radio" name="properties[Time Zone: EST]" value="10:00 am" checked><span>10:00 am</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="11:00 am"> <span>11:00 am</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="12:00 am"><span>12:00 am</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="1:00 pm"> <span>1:00 pm</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="2:00 pm"> <span>2:00 pm</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="3:00 pm"> <span>3:00 pm</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="4:00 pm"> <span>4:00 pm</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="5:00 pm"> <span>5:00 pm</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="6:00 pm"> <span>6:00 pm</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="7:00 pm"> <span>7:00 pm</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="8:00 pm"> <span>8:00 pm</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="9:00 pm"> <span>9:00 pm</span>
                    <input required type="radio" name="properties[Time Zone: EST]" value="10:00pm"> <span>10:00 pm</span>
                      </p>

                <p>

if I remove the style .radio-toolbar input[type="radio"] { opacity: 0; width: 0; position: absolute; } then default radio buttons appear and these are working — Naveed Hussain, Aug 22 '20 at 07:34

score 2 · Accepted Answer · answered Aug 22 '20 at 07:38

You were nearly there. You need to use label as oppose to span to make sure that when clicked the radio button are getting checked and the active green CSS is applied to them.

I have fixed up your HTML and its all working as expected and created a fully working answer.

Also i have added some jQuery code to show (for demo purposes) that when input type radio button are getting clicked (change event) their correct value is showing in the console.log as well.

Live Demo:

$('input[type="radio"]').change(function() {
  console.log($(this).val()) //just for demo purposes
})

.radio-toolbar {
  margin: 10px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  width: 0;
  position: absolute;
}

.radio-toolbar label {
  display: inline-block;
  background-color: transparent;
  padding: 10px 20px;
  width: 30.33%;
  margin: 5px 4px;
  font-size: 16px;
  border: 2px solid #bfbfbf;
  border-radius: 1px;
}

.radio-toolbar label:hover {
  background-color: #f79da9;
  color: #fff;
  transition: 0.5s;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:focus+label {
  border: 2px dashed #444;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bfb;
  border-color: #4c4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Time Zone: EST</label><br>
<p class="line-item-property__field radio-toolbar">
  <input required type="radio" id="10" name="properties[Time Zone: EST]" value="10:00 am" checked><label for="10">10:00 am</label>
  <input required type="radio" id="11" name="properties[Time Zone: EST]" value="11:00 am"> <label for="11">10:00 am</label>
  <input required type="radio" id="12" name="properties[Time Zone: EST]" value="12:00 am"><label for="12">12:00 am</label>
  <input required type="radio" id="13" name="properties[Time Zone: EST]" value="1:00 pm"> <label for="13">1:00 pm</label>
  <input required type="radio" id="14" name="properties[Time Zone: EST]" value="2:00 pm"> <label for="14">2:00 pm</label>
  <input required type="radio" id="15" name="properties[Time Zone: EST]" value="3:00 pm"> <label for="15">3:00 pm</label>
  <input required type="radio" id="16" name="properties[Time Zone: EST]" value="4:00 pm"><label for="16">4:00 pm</label>
  <input required type="radio" id="17" name="properties[Time Zone: EST]" value="5:00 pm"> <label for="17">5:00 pm</label>
  <input required type="radio" id="18" name="properties[Time Zone: EST]" value="6:00 pm"><label for="18">6:00 pm</label>
  <input required type="radio" id="19" name="properties[Time Zone: EST]" value="7:00 pm"> <label for="19">7:00 pm</label>
  <input required type="radio" id="20" name="properties[Time Zone: EST]" value="8:00 pm"> <label for="20">8:00 pm</label>
  <input required type="radio" id="21" name="properties[Time Zone: EST]" value="9:00 pm"> <label for="21">9:00 am</label>
  <input required type="radio" id="22" name="properties[Time Zone: EST]" value="10:00pm"><label for="22">10:00 am</label>
</p>

@Unbywyd What are these requirement ? Please explain - I really want to know these requirements. ? — Always Helping, Aug 22 '20 at 07:45
Radio buttons must be grouped and have a group label, you should not have an empty label without a link to the input see my answer for details — Unbywyd, Aug 22 '20 at 07:49
@Unbywyd Where is the empty `label` and where are they not grouped ? — Always Helping, Aug 22 '20 at 07:50
https://www.w3.org/WAI/tutorials/forms/instructions/, see (2.4.6 Headings and Labels) WCAG 2.0 AA and 3.3.2 Labels or Instructions of A lvl, I live in Israel, your HTML does not meet our requirements (this is just an example) we have a requirement WCAG 2.0 AA — Unbywyd, Aug 22 '20 at 07:53
@Unbywyd Read Official [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - **W3-School** docs have not been updated for almost `100` years. Personal advice do not follow W3 schools. — Always Helping, Aug 22 '20 at 07:55
W3-School has nothing to do with, I'm talking about the specification and accessibility recommendations on the web pages which in some countries are law. https://www.w3.org/WAI/standards-guidelines/wcag/ Welcome to web — Unbywyd, Aug 22 '20 at 07:58
@Unbywyd I have no idea what are you saying about all these other countries requirements with web. I wish you best of luck. Thank you! — Always Helping, Aug 22 '20 at 08:01

Unbywyd · Answer 2 · 2020-08-22T08:21:29.330

You must use label and not span tag, read this article: Labeling Controls

<input required type="radio" name="properties[Time Zone: EST]" id="t1" value="10:00 am" checked><label for="t1">10:00 am</label>

Also, you should group items with fieldset replace your label to legend, or use aria tags (role=group, aria-labelledby) more about grouping elements: https://www.w3.org/TR/WCAG20-TECHS/ARIA17.html

Example:

<fieldset class="line-item-property__field radio-toolbar">
  <legend>Time Zone: EST</legend>
  <input required type="radio" id="a10" name="properties[Time Zone: EST]" value="10:00 am" checked><label for="a10">10:00 am</label>
  <input required type="radio" id="a11" name="properties[Time Zone: EST]" value="11:00 am"> <label for="a11">10:00 am</label>
  <input required type="radio" id="a12" name="properties[Time Zone: EST]" value="12:00 am"><label for="a12">12:00 am</label>
  <input required type="radio" id="a13" name="properties[Time Zone: EST]" value="1:00 pm"> <label for="a13">1:00 pm</label>
  <input required type="radio" id="a14" name="properties[Time Zone: EST]" value="2:00 pm"> <label for="a14">2:00 pm</label>
  <input required type="radio" id="a15" name="properties[Time Zone: EST]" value="3:00 pm"> <label for="a15">3:00 pm</label>
  <input required type="radio" id="a16" name="properties[Time Zone: EST]" value="4:00 pm"><label for="a16">4:00 pm</label>
  <input required type="radio" id="a17" name="properties[Time Zone: EST]" value="5:00 pm"> <label for="a17">5:00 pm</label>
  <input required type="radio" id="a18" name="properties[Time Zone: EST]" value="6:00 pm"><label for="a18">6:00 pm</label>
  <input required type="radio" id="a19" name="properties[Time Zone: EST]" value="7:00 pm"> <label for="a19">7:00 pm</label>
  <input required type="radio" id="a20" name="properties[Time Zone: EST]" value="8:00 pm"> <label for="a20">8:00 pm</label>
  <input required type="radio" id="a21" name="properties[Time Zone: EST]" value="9:00 pm"> <label for="a21">9:00 am</label>
  <input required type="radio" id="a22" name="properties[Time Zone: EST]" value="10:00pm"><label for="a22">10:00 am</label>
</fieldset>

Pay attention despite the specification HTML5 about ID as it has many consequences, for example to create css rules, there is a good question and an answer to it

You must understand that any of your html must comply with all required web standards including WCAG accessibility, you can read the accessibility requirements in your region here

Radio Buttons stopped working when styled as button look like

2 Answers2