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

csshtml

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

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 №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 №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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps to interact with a marquee using Selenium?

Currently, I am faced with an application that displays a list of upcoming vessels in a marquee format. I am looking for a way to click on the specific data using Selenium with Java. Any advice or alternative solutions would be greatly appreciated. ...

javahtmlseleniumclickmarquee

Adjust the size of the textarea to accommodate the number of lines of text

<script type="text/javascript"> function AutoGrowTextArea(textField) { if (textField.clientHeight < textField.scrollHeight) { textField.style.height = textField.scrollHeight + "px"; if (textField.clientHeight ...

javascripthtml

trigger a function when the iframe is altered

I am currently working on creating a function that can process credit card payments using an iframe. The challenge I am facing at the moment is dealing with error messages appearing in a less than ideal manner. Photo: I have been attempting to capture the ...

javascriptjqueryhtmliframe

When typing in the textarea, pressing the return key to create a line break does not function as expected

Whenever I hit the return key to create a new line in my post, it seems to automatically ignore it. For example, if I type 'a' press 'return' and then 'b', it displays 'ab' instead of 'a b'. How can I fi ...

javascriptphphtml

What is the best method for converting a list tag into an array of objects with XPath?

I am attempting to extract the ordered list and generate an array of list tags along with their content. I have experimented with different paths, such as: //li[div/@class="business-info"] //li[div[@class="business-info"]] //li[descendant::div[@class="bu ...

javascripthtmlarraysnode.jsxpath

What is the best way to retrieve user data and format the output using JavaScript into a structured form?

I am trying to achieve the functionality shown in this image: My goal is to extract user input from a form and display it on my webpage using JavaScript. Below is the code snippet that I have been working on. Code: function show(){ var ...

javascripthtml

Does text alignment apply to one tag but not the other?

Hello, I am in the process of creating a basic webpage and encountering some formatting issues. When I apply the style format to one element, it aligns perfectly, but for another element it doesn't seem to be working. I'm certain it's a simp ...

htmlcss

What is the reason for the difference in width between Bootstrap-5 row and regular div blocks?

My code may seem simple, but I have encountered an issue with it: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7abb7a9">[email protected]</a ...

csstwitter-bootstrapbootstrap-5

Is it advisable to avoid using `&apos;` for escaping single quotes?

According to the insights shared in conversations about the popularity of single quotes in HTML and Jquery embedded quote in attribute, the Wikipedia page on HTML highlights that: The use of the single-quote character ('), as a way to quote an attri ...

htmlescapingquotes

How to position a Navbar on top of a grid background structure

I am currently working on developing a responsive website, and I have encountered a challenge that I need help with. I am looking to create a header using a grid system, where I have divided the header into two parts: col-md-4 : For an Image col-md-7 : ...

htmlcssresponsive-designbootstrap-5

Is it possible to animate multiple SVGs on a webpage with just the click of a button?

Is there a way to trigger the animation in the SVG each time a next/prev button is clicked while navigating through a carousel where the same SVG is repeated multiple times? The carousel is built using PHP and a while loop. jQuery(document).ready(function ...

javascriptjquerycssanimationsvg

Get the ID from a row that was created dynamically

I have a webpage that pulls information from my database and displays it. Users should be able to click on the "details" link to see more details about a particular record, or click on an input box in the "check" column and submit to update the record stat ...

javascriptjqueryhtmlajax

How about: "Insert a line break inside a div element"

My goal is to have 3 icons positioned side by side that will float left if the window shrinks. Under each icon, I plan to include some text. Below you can see that I've made progress on this layout. .icons { BORDER-TOP: black 1px solid; HEIGHT: 10 ...

htmlcss

Looking to implement a delay in the model popup using Pure JavaScript

Looking for a method to implement a delay in the popup... I've tried a few solutions without success. What's the secret to adding a delay to the modal below? Any help is greatly appreciated. var modal = document.querySelector(".modal"); var t ...

javascripthtml

When a new VueJS project is created, it failed to automatically install the necessary basic HTML files and folders

Hey there, I am completely new to Vue.js. Just recently, I installed the Vue.js/CLI and created a brand new project using vue create test. This prompted me to choose from three options: > Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3 ...

javascripthtmlvue.jsvue-clijavascript-framework

Retrieve data quickly and navigate directly to specified div element on page

I am facing an issue with scrolling on my website. While it currently works fine, I would like to make the scrolling instant without any animation. I want the page to refresh and remain in the same position as before, without automatically scrolling to a s ...

javascripthtmljquery

`CSS Animation fails to run in Internet Explorer and Microsoft Edge browsers`

My issue with the CSS animation is that while the opacity animates properly, the translate effect does not seem to work as expected. You can see the problem here: https://jsfiddle.net/bLxb8k3s/ It appears that the reason for this issue is because IE and ...

cssinternet-explorercss-animationsmicrosoft-edge

Steps for embedding JavaScript code within HTML tags using a JavaScript file

Working on a React web app, I am solely using js and css files without any html. In one of my js files, there is a mix of html and js code like this: class Teams extends Component { state = { teams: [] } componentDidMount() { ...

javascripthtmlreactjs

AngularJS Bootstrap CSS implementation for Hand Cursor Grab

Is there a way to ensure the cursor is always a hand / grab for sortable containers in AngularJS & Bootstrap? What specific HTML modification would achieve this change? <div ui-sortable="sortableOptions" ng-model="responses" class="container-f ...

cssangularjstwitter-bootstrapcursor

The display of website content across various screens

I'm relatively new to creating websites using scripts, CSS, etc. But I feel like I'm getting the hang of it pretty well... Now I've reached a point where I want my site to look good on different screen resolutions. Currently, I have somethin ...

javascripthtmlresolutionstretch