The functionality of the checkboxes and radio buttons is currently malfunctioning

After creating a customized radio button and checkbox button, everything looks fine in the css, but there is an issue with the functionality. When clicking on a radio button or checkbox, it does not register as the newly checked button. Can anyone assist me in identifying the problem?

CODE:

/** SIZE MODAL BUTTONS **/
.prod-desk-size-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 45pt;
  position:relative;
  float:left;
  width:100%;
  margin-bottom:20px;
}

.prod-desk-size-container input {
position: absolute;
    opacity: 0;
    cursor: pointer;
}

.gold-check {
position: absolute;
    top: 0;
    left: 20px;
    height: 25px;
    width: 25px;
cursor: pointer;
border: solid 1px #d9d9d9;
}

.gold-check:after {
    content: "";
    position: absolute;
    display: none;
}

.prod-desk-size-container input:checked ~ .gold-check {
    background-image: url('../images/icon-selected.png');
background-size: 100%;
    border: 0px;
}
<div class="modal fade show" id="modal-desk-product" tabindex="-1" role="dialog" >
<div class="modal-dialog" role="document">
<div class="modal-content">

<div class="modal-header">
<h5 class="modal-title">HAWAIIAN</h5><br>
<p class="modal-desc">Ham, pineapple,corn and mozzarella cheese</p>
<div class="btn-close" data-dismiss="modal"></div>
</div>

<div class="modal-body mb-2">
          <h6 class="modal-desk-product-title font-weight-bold text-uppercase text-left">What size are you after?</h6>
<hr>
          <div class="prod-desk-size row text-left" id="prod-desk-size" data-toggle="buttons">
   <label class="prod-desk-size-container col-sm-6 font-weight-bold">Small
                               <input type="radio" name="prod-desk-size-radio" checked>
                               <span class="gold-check rounded-circle"></span>
                           </label>
   
   <label class="prod-desk-size-container col-sm-6 font-weight-bold">Medium
                               <input type="radio" name="prod-desk-size-radio">
                               <span class="gold-check rounded-circle"></span>
                           </label>
   
   <label class="prod-desk-size-container col-sm-6 font-weight-bold">Large
                               <input type="radio" name="prod-desk-size-radio">
                               <span class="gold-check rounded-circle"></span>
                           </label>
   
   <label class="prod-desk-size-container col-sm-6 font-weight-bold">Seriously Large
                               <input type="radio" name="prod-desk-size-radio">
                               <span class="gold-check rounded-circle"></span>
                           </label>
</div>
            </div>
</div>
</div>

htmlcssforms

Answer №1

Kindly add this CSS code snippet:

.prod-desk-del-container{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 45pt;
  position:relative;
  float:left;
  width:100%;
  margin-bottom:20px;
}

I hope this information is helpful.

If you need further clarification, please let me know.

                        /** DELETE INGREDIENT MODAL BUTTONS **/
.prod-desk-del-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 45pt;
    position:relative;
    float:left;
    width:100%;
    margin-bottom:20px;
}

/* Hide the browser's default checkbox */
.prod-desk-del-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.gold-check-box {
    position: absolute;
    top: 0;
    left: 20px;
    height: 25px;
    width: 25px;
    background-color: #eee;
    cursor: pointer;
}

/* When the checkbox is checked, add a blue background */
.prod-desk-del-container input:checked ~ .gold-check-box {
    background-color: #b79469;
    background-image: url('../images/icon-check-white.png');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: 2px 6px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.gold-check-box:after {
    content: "";
    position: absolute;
    display: none;
}
<h6 class="modal-desk-product-title font-weight-bold text-uppercase text-left pt-4">Would you like any extra ingredients?</h6>
                      <hr>
                        <div class="prod-desk-del row text-left" id="prod-desk-del" data-toggle="buttons">
                           <label class="prod-desk-del-container col-sm-6 font-weight-bold">Eggs <span class="price">+$10.95</span>
                               <input type="checkbox" checked="checked" name="prod-desk-side-radio">
                               <span class="gold-check-box rounded"></span>
                           </label>

                           <label class="prod-desk-del-container col-sm-6 font-weight-bold">Side of portion of Beef Ribs <span class="price">+$10.95</span>
                               <input type="checkbox" checked="checked" name="prod-desk-side-radio">
                               <span class="gold-check-box rounded"></span>
                           </label>

                           <label class="prod-desk-del-container col-sm-6 font-weight-bold">Side of portion of Pork Ribs <span class="price">+$15.95</span>
                               <input type="checkbox" checked="checked" name="prod-desk-side-radio">
                               <span class="gold-check-box rounded"></span>
                           </label>

                           <label class="prod-desk-del-container col-sm-6 font-weight-bold">Bacon Onion Jam <span class="price">+$15.95</span>
                               <input type="checkbox" checked="checked" name="prod-desk-side-radio">
                               <span class="gold-check-box rounded"></span>
                           </label>

                           <label class="prod-desk-del-container col-sm-6 font-weight-bold">Prawn Top <span class="price">+$9.95</span?>
                               <input type="checkbox" checked="checked" name="prod-desk-side-radio">
                               <span class="gold-check-box rounded"></span>
                           </label>

                           <label class="prod-desk-del-container col-sm-6 font-weight-bold">Grilled Onions <span class="price">+$9.95</span>
                               <input type="checkbox" checked="checked" name="prod-desk-side-radio">
                               <span class="gold-check-box rounded"></span>
                           </label>

                           <label class="prod-desk-del-container col-sm-6 font-weight-bold">Bloomin' Oion Petals <span class="price">+$15.95</span>
                               <input type="checkbox" checked="checked" name="prod-desk-side-radio">
                               <span class="gold-check-box rounded"></span>
                           </label>

                           <label class="prod-desk-del-container col-sm-6 font-weight-bold">King Island Roaring Forties <span class="price">+$15.95</span>
                               <input type="checkbox" checked="checked" name="prod-desk-side-radio">
                               <span class="gold-check-box rounded"></span>
                           </label>

                           <label class="prod-desk-del-container col-sm-6 font-weight-bold">Sauteed Mushrooms <span class="price">+$15.95</span>
                               <input type="checkbox" checked="checked" name="prod-desk-side-radio">
                               <span class="gold-check-box rounded"></span>
                           </label>

                           <label class="prod-desk-del-container col-sm-6 font-weight-bold">Mayonnaise<span class="price">+$10.95</span>
                               <input type="checkbox" checked="checked" name="prod-desk-side-radio">
                               <span class="gold-check-box rounded"></span>
                           </label>

                           <label class="prod-desk-del-container col-sm-6 font-weight-bold">Pineapple <span class="price">+$15.95</span>
                               <input type="checkbox" checked="checked" name="prod-desk-side-radio">
                               <span class="gold-check-box rounded"></span>
                           </label>
                        </div>

Answer №2

To ensure proper alignment, don't forget to set the parent element (<label>) with position:relative:

.prod-desk-del-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 45pt;
    position: relative; // Make sure to include this
}

Keep in mind that for semantic reasons, an <input> should not be placed within a <label>

Answer №3

Ensure to apply this particular style

.prod-desk-size-container input:checked ~ .gold-check {
    background-image: url('../images/icon-selected.png');
    background-size: 100%;
    border: 1px solid;
    background-color: gray;
}

The justification behind this is

Upon checking your radio button, you are assigning 

.prod-desk-size-container input:checked ~ .gold-check{border:0;}

Therefore, make sure to specify a color and border according to your specifications within the class-> 

.prod-desk-size-container input:checked ~ .gold-check

This information should assist you

Please inform me if you require further clarification.

/** SIZE MODAL BUTTONS **/
.prod-desk-size-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 45pt;
  position:relative;
  float:left;
  width:100%;
  margin-bottom:20px;
}

.prod-desk-size-container input {
position: absolute;
    opacity: 0;
    cursor: pointer;
}

.gold-check {
position: absolute;
    top: 0;
    left: 20px;
    height: 25px;
    width: 25px;
cursor: pointer;
border: solid 1px #d9d9d9;
}

.gold-check:after {
    content: "";
    position: absolute;
    display: none;
}

.prod-desk-size-container input:checked ~ .gold-check {
    background-image: url('../images/icon-selected.png');
background-size: 100%;
    border: 1px solid;
    background-color: gray;
}
.modal-content:focus,
.prod-desk-size-container:focus,
.prod-desk-size:focus,
.modal-header:focus,
.modal-dialog:focus,
.modal:focus {
outline: none;
}
<div class="modal fade show" id="modal-desk-product" tabindex="-1" role="dialog" >
<div class="modal-dialog" role="document">
<div class="modal-content">

<div class="modal-header">
<h5 class="modal-title">HAWAIIAN</h5><br>
<p class="modal-desc">Ham, pineapple,corn and mozzarella cheese</p>
<div class="btn-close" data-dismiss="modal"></div>
</div>

<div class="modal-body mb-2">
          <h6 class="modal-desk-product-title font-weight-bold text-uppercase text-left">What size are you after?</h6>
<hr>
          <div class="prod-desk-size row text-left" id="prod-desk-size" data-toggle="buttons">
   <label class="prod-desk-size-container col-sm-6 font-weight-bold">Small
                               <input type="radio" name="prod-desk-size-radio" checked>
                               <span class="gold-check rounded-circle"></span>
                           </label>
   
   <label class="prod-desk-size-container col-sm-6 font-weight-bold">Medium
                               <input type="radio" name="prod-desk-size-radio">
                               <span class="gold-check rounded-circle"></span>
                           </label>
   
   <label class="prod-desk-size-container col-sm-6 font-weight-bold">Large
                               <input type="radio" name="prod-desk-size-radio">
                               <span class="gold-check rounded-circle"></span>
                           </label>
   
   <label class="prod-desk-size-container col-sm-6 font-weight-bold">Seriously Large
                               <input type="radio" name="prod-desk-size-radio">
                               <span class="gold-check rounded-circle"></span>
                           </label>
</div>
            </div>
</div>
</div>

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

Using Javascript to apply unique styling to CKEditor text

Currently, I am working on a self-contained web page and utilizing CKEditor 4.6.2 for input purposes. The issue I am facing at the moment is attempting to apply a CSS class style to text that has been inserted via JavaScript. My CSS is located in the head ...

javascripthtmlcssckeditor

The z-index of two elements seems to be behaving differently than anticipated

I am encountering an issue with the code provided below, which is a simplified version of a larger problem. Can you explain why, if: .div_A {z-index: 10;} < .div_C {z-index: 20;} the button inside div_C appears behind div_A? I need to understand the ...

htmlcss

Creating custom fonts using compass

Apologies if my English is not up to par, as I am French. I'm encountering an issue where I include a font-face in my scss file like so: @include font-face("Enhanced Dot Digital", font-files("font/enhanced_dot_digital.ttf")); However, upon compilati ...

csscompilationsassfont-facecompass-sass

What might be causing my button to require two clicks to toggle a function in JavaScript?

Need help with a button on my webpage! It's supposed to change colors from black to pink and then to purple when clicked. However, it's taking two clicks to go from black to pink. Can someone assist in fixing this issue so it changes color on the ...

javascripthtmlcsseventsonclick

Submitting an AJAX form without refreshing the parent page in PHP

I'm encountering some issues with an AJAX form submission. $("#send").on("click", function() { $.ajax({ type: "POST", url: "ads_process.php", data: $("#ads").serialize(), success: function(){ if(data == ...

jqueryajaxformseventssubmit

Arrange divs vertically in Bootstrap 5 without overlapping or shifting to the side

I am attempting to arrange a div like a gallery using a loop, but they are only stacking on top of each other. Is there an efficient way to achieve this with Bootstrap? I have tried creating more divs, but they end up repeating the results from the first o ...

phphtmlcsslaravelbootstrap-4

Transitioning the style code from inline to the head of the document disrupts the straightforward JavaScript intended to

As I delve into the world of web development, I encountered a simple issue that has been causing me frustration for the past hour. It involves code to display the border color of a div element using an alert. The code works perfectly fine when the style is ...

javascripthtmlcss

Using PHP to create a REST API that returns JSON data for webpages

I'm in the process of building a PHP restful API that currently returns JSON responses for native mobile app use (iOS/Android). My query is whether the same restful API can also be utilized for website purposes, or if I should include support for HTM ...

phphtmlweb-servicesrest

Filtering a section of the HTML using Ajax and jQuery

Dealing with an Ajax call in jQuery that's delivering a lot of unexpected HTML content. I'm attempting to extract the specific part I need, but the console is showing an empty string. Can anyone provide guidance on resolving this issue? $.ajax({ ...

jqueryhtmlajax

hide content on both desktop and mobile devices

I can't seem to figure out what's wrong here and my mind is blank. I have 2 tables - one for desktop users and one for mobile users. I attempted to hide one using the display none property in my code. .mobile{display: none;} This CSS was mean ...

htmlcssmobile

Having trouble getting my angular form validation to function properly

Even though I disabled Bootstrap's validation while using Angular, the validation for every input field still doesn't work. It seems like I have everything set up correctly. My code looks like this below with no success on input validation: < ...

javascriptangularjsformstwitter-bootstrap

Is there a way to prevent the characters "<" and ">" from being changed to "<" and ">" when used inside an href tag in WordPress?

I'm looking to create a link on my WordPress website that directs users to the default "forgot password" page within the platform. I am following guidance from the official WordPress documentation found at: http://codex.wordpress.org/Function_Referen ...

phphtmlwordpress

The page is not loading correctly until a refresh is done

My website seems to be displaying incorrectly on most browsers until the page is refreshed. Check it out here: I'm puzzled as to why this issue is occurring and why it resolves itself upon refresh (even without clearing the cache). The layout consis ...

htmlcsscss-float

What is the best way to ensure an inline HTML style takes precedence over a CSS style?

I'm trying to pass a value into an Angular Material Table in order to set the row color to black. However, it seems like my CSS stylesheet keeps overriding this setting which is meant to make the rows gray. I thought inline styling should take precede ...

htmlcssangular

The use of backdrop-filter results in artifacts appearing in rounded corners

I am experiencing an issue with a CSS animation where I have an element that fades and child elements with a backdrop-filter to blur the background in Safari. There are two specific problems: The element's rounded borders are showing dark shadow ...

csssafaricss-transitionscss-animations

Troubleshooting: Codeigniter unable to retrieve form field value from array fields

When I try to retrieve the post fields value in my View, the form does not seem to capture the values correctly. Instead, I end up with an "Array" string in my form View when I click the submit button. https://i.sstatic.net/vyd7k.png In my Controller, I ...

phparraysformscodeigniter

HTML-Formatted Email Content

Similar Question: MailTo with HTML body I am looking to utilize JavaScript to send emails. I came across this helpful post: Sending emails with JavaScript. My goal is to include images, bold text, and color changes in the email content. Does anyone h ...

javascripthtmlemail

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

javascriptjqueryhtmlajax

Resolve background image alignment issue in Firefox browser for Bootstrap carousel

I am currently utilizing this particular bootstrap template. My goal is to have the carousel background images fixed, however, when I include the following CSS: background-attachment: fixed; like so: <div class="carousel-item active" style=&q ...

htmlcssbootstrap-4

How do I hide a dropdown menu when the selector's value changes in iOS6?

I'm currently developing a hybrid application using Worklight. When I tap on a select control, a native dropdown appears. However, when I choose an option and the onchange event is triggered, the dropdown doesn't disappear unless I tap on the do ...

javascriptjqueryioshtmlibm-mobilefirst