After applying CSS, I am unable to click on the radio buttons

Question

After applying CSS, I am unable to click on the radio buttons

Even after selecting the other two, it still defaults to the first one.
Here is my code:

input[type=radio] {
            display:none;
}


    input[type=radio] + label:before {
            content: "";  
            display: inline-block;  
            width: 35px;  
            height: 35px;  
            vertical-align:middle;
            margin-right: 8px;  
            background-color: #DFF0EF;  
            box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
            border-radius: 4px;  
        }

    input[type=radio]:checked + label:before {
            content:"\2714";
            color:white;
            background-color: #34E098; 
            font-size:1.5em;
            text-align:center;
            line-height:34px;
            text-shadow:0px 0px 3px #eee;

        }

Check out my buttons on CodePen: https://codepen.io/coderguyinthehouse/pen/VjbdLd

css html

Answer 1

Answer №1

It is important for your IDs to be unique, along with the corresponding labels' for attribute.

For example:

<input type="radio" id="sizeselected1" name="downloadsize" value="KB">
<label for="sizeselected1">1</label>

input[type=radio] {
            display:none;
}

input[type=radio] + label:before {
        content: "";  
        display: inline-block;  
        width: 35px;  
        height: 35px;  
        vertical-align:middle;
        margin-right: 8px;  
        background-color: #DFF0EF;  
        box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
        border-radius: 4px;  
    }

input[type=radio]:checked + label:before {
        content:"\2714";
        color:white;
        background-color: #34E098; 
        font-size:1.5em;
        text-align:center;
        line-height:34px;
        text-shadow:0px 0px 3px #eee;
       
    }

<form class="sizeselect" id="sizeselect" name="sizeselect">
  <input type="radio" id="sizeselected1" name="downloadsize" value="KB"><label for="sizeselected1">1</label>
  <input type="radio" id="sizeselected2" name="downloadsize" value="MB"><label for="sizeselected2">2</label>
  <input type="radio" id="sizeselected3" name="downloadsize" value="GB"><label for="sizeselected3">3</label>
</form>

<form class="speedselect" id="speedselect" name="speedselect">
  <input type="radio" id="speedselected1" name="downloadspeed" value="Kbps"><label for="speedselected1">11</label>
  <input type="radio" id="speedselected2" name="downloadspeed" value="Mbps"> <label for="speedselected2">12</label>
  <input type="radio" id="speedselected3" name="downloadspeed" value="Gbps"> <label for="speedselected3">13</label>
</form>

Answer 2

It is important for your IDs to be unique, along with the corresponding labels' for attribute.

For example:

<input type="radio" id="sizeselected1" name="downloadsize" value="KB">
<label for="sizeselected1">1</label>

input[type=radio] {
            display:none;
}

input[type=radio] + label:before {
        content: "";  
        display: inline-block;  
        width: 35px;  
        height: 35px;  
        vertical-align:middle;
        margin-right: 8px;  
        background-color: #DFF0EF;  
        box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
        border-radius: 4px;  
    }

input[type=radio]:checked + label:before {
        content:"\2714";
        color:white;
        background-color: #34E098; 
        font-size:1.5em;
        text-align:center;
        line-height:34px;
        text-shadow:0px 0px 3px #eee;
       
    }

<form class="sizeselect" id="sizeselect" name="sizeselect">
  <input type="radio" id="sizeselected1" name="downloadsize" value="KB"><label for="sizeselected1">1</label>
  <input type="radio" id="sizeselected2" name="downloadsize" value="MB"><label for="sizeselected2">2</label>
  <input type="radio" id="sizeselected3" name="downloadsize" value="GB"><label for="sizeselected3">3</label>
</form>

<form class="speedselect" id="speedselect" name="speedselect">
  <input type="radio" id="speedselected1" name="downloadspeed" value="Kbps"><label for="speedselected1">11</label>
  <input type="radio" id="speedselected2" name="downloadspeed" value="Mbps"> <label for="speedselected2">12</label>
  <input type="radio" id="speedselected3" name="downloadspeed" value="Gbps"> <label for="speedselected3">13</label>
</form>

Answer 3

Answer №2

Avoid using the same ID's for different elements.

<form class="sizeselect" id="sizespecific" name="sizespecific">
<input type="radio" id="sizeoption1" name="downloadsize" value="KB"
<label for="sizeoption1">1</label>
 <input type="radio" id="sizeoption2" name="downloadsize" value="MB"
<label for="sizeoption2">2</label>
<input type="radio" id="sizeoption3" name="downloadsize" value="GB"
<label for="sizeoption3">3</label>
</form>

Remember to update IDs in other forms as well.

Answer 4

Avoid using the same ID's for different elements.

<form class="sizeselect" id="sizespecific" name="sizespecific">
<input type="radio" id="sizeoption1" name="downloadsize" value="KB"
<label for="sizeoption1">1</label>
 <input type="radio" id="sizeoption2" name="downloadsize" value="MB"
<label for="sizeoption2">2</label>
<input type="radio" id="sizeoption3" name="downloadsize" value="GB"
<label for="sizeoption3">3</label>
</form>

Remember to update IDs in other forms as well.

Answer 5

Answer №3

It's important to assign a unique identifier to each input element

<form class="sizeselect" name="sizeselect">
  <input type="radio" id="sizeselected1" name="downloadsize" value="KB"><label for="sizeselected1">1</label>
  <input type="radio" id="sizeselected2" name="downloadsize" value="MB"><label for="sizeselected2">2</label>
  <input type="radio" id="sizeselected3" name="downloadsize" value="GB"><label for="sizeselected3">3</label>
</form>

<form class="speedselect" name="speedselect">
  <input type="radio" id="speedselected11" name="downloadspeed" value="Kbps"><label for="speedselected11">11</label>
  <input type="radio" id="speedselected12" name="downloadspeed" value="Mbps"> <label for="speedselected12">12</label>
  <input type="radio" id="speedselected13" name="downloadspeed" value="Gbps"> <label for="speedselected13">13</label>
</form>

Answer 6

It's important to assign a unique identifier to each input element

<form class="sizeselect" name="sizeselect">
  <input type="radio" id="sizeselected1" name="downloadsize" value="KB"><label for="sizeselected1">1</label>
  <input type="radio" id="sizeselected2" name="downloadsize" value="MB"><label for="sizeselected2">2</label>
  <input type="radio" id="sizeselected3" name="downloadsize" value="GB"><label for="sizeselected3">3</label>
</form>

<form class="speedselect" name="speedselect">
  <input type="radio" id="speedselected11" name="downloadspeed" value="Kbps"><label for="speedselected11">11</label>
  <input type="radio" id="speedselected12" name="downloadspeed" value="Mbps"> <label for="speedselected12">12</label>
  <input type="radio" id="speedselected13" name="downloadspeed" value="Gbps"> <label for="speedselected13">13</label>
</form>

Answer 7

Answer №4

If you're utilizing custom checkboxes, the checked state will activate when you click on the label. However, all of the labels are associated with the same input (sizeselected). To fix this issue, simply change the IDs for each input and everything should function as expected!

    <form class="sizeselect" id="sizeselect" name="sizeselect">
      <input type="radio" id="sizeselected" name="downloadsize" value="KB">
      <label for="sizeselected">1</label>
      <input type="radio" id="sizeselected2" name="downloadsize" value="MB">        
      <label for="sizeselected2">2</label>
      <input type="radio" id="sizeselected3" name="downloadsize" value="GB">
      <label for="sizeselected3">3</label>
    </form>

https://codepen.io/will0220/pen/KrmZqr

Answer 8

If you're utilizing custom checkboxes, the checked state will activate when you click on the label. However, all of the labels are associated with the same input (sizeselected). To fix this issue, simply change the IDs for each input and everything should function as expected!

    <form class="sizeselect" id="sizeselect" name="sizeselect">
      <input type="radio" id="sizeselected" name="downloadsize" value="KB">
      <label for="sizeselected">1</label>
      <input type="radio" id="sizeselected2" name="downloadsize" value="MB">        
      <label for="sizeselected2">2</label>
      <input type="radio" id="sizeselected3" name="downloadsize" value="GB">
      <label for="sizeselected3">3</label>
    </form>

https://codepen.io/will0220/pen/KrmZqr

After applying CSS, I am unable to click on the radio buttons

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Why is the Slick Slider displaying previous and next buttons instead of icons?

Bootstrap 4 Nav Table of Contents with Expand and Collapse Feature

Can AngularJS Filters be used to convert a number into a string, but not the other way around?

Tips for addressing the issue of button flickering due to CSS transitions

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?

Ensure that the Popover vanishes upon scrolling the page - Material UI (MUI) v5 compatibility with React

Desktop media queries are functioning properly, yet experiencing issues on mobile devices

I am facing an issue with grabbing text using simple HTML DOM in PHP with cURL

Developing a downloadable PDF version of an online platform

The height of the input element is greater than the size of the font

`Using a Video in a JQuery Carousel`

Dividing an AngularJS module across multiple iFrames on a single webpage

I'm encountering a Python Selenium error related to the timing of webpage loading

PHP error: Index not defined

Unable to Toggle Bootstrap 5 Dropdown

Enable the feature for users to upload images to a specific folder within the Chrome extension without the need for

Minimize the space between flex items

Having trouble getting the .toggle() function with classList to work on one element, despite working fine on others

Utilizing jQuery to extract the `h1` element from a dynamically loaded external page within the

The popover seems to be failing to appear