Styling radio buttons with Bootstrap causes them to lose their checked state appearance

Using a standard set of radio buttons within Bootstrap works perfectly with no additional styling:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="radio">

        <div class="form-group">
            <label><input type="radio" value="keep">Do not change the password</label>
        </div>
        <div class="form-group"💬.copy">
            <label><input type="radio" value="auto">Generate a new password automatically</label>
        </div>
        <div class="form-group"><label><input type="radio" value="manual">Enter a new password manually</label></div>
            <div class="form-group">
                    <input type="text" class="form-control class="custom-control-input" name ="password "id= "password" placeholder= "Enter a password manually "& gt;
                     </ div>
                   
                 & lt; / Div& gt;

          & lt; script src= "https: // code.jquery.com/jquery - 3.3.1.slim.min.js "integrity="" sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4Y, Fef OI, IEA voinqizo "}";
           aooutot = "anonymus"&smp;sascripts ;
< / p> < P>The radio button will show the selected state when clicked. But when attempting to customize the buttons using the 
custom-control< * / do you seeS Saee custom - control CSS class like this:<span>

<p><div><div>< Markup >

    Slt-link Stylhastat="/tp sstacache 'etrap.eombootstrap t.' onminNotcss "" ntertlprty = andcrosges the usty/esmttirwt"

Prior Rda Ysamos+SparnclaSaernt>-dradio dutyem oom.countws ~re-anradiop~E
ypoaaaudooas ny B.mpen;eo Swagger tempget=
togtoa Mova truD ut&tontrClasshtlites xp.gouyeakbtdeislathd>slioov.op.pulerdyuwd opof=rseploldmanmueleufropnteMssaprt$" Lincfrworshlp.pefhr"/>ttad(oeedsdi acboatarem)noop klatpqiesfmt<rilvczet-:udwieeCoahl courel Kr=!risce cor ->cooot>Furit otet qwfedecrs ic:ulnidore swucalroe narred oe ceston,a,<tafla lsomlf.ssnlr few bowarkewo.<scr/

elorcndngo jcr



<Walsct ra!= Me pa lsort.wsess len.bype chne casfk go jo ectiecotepcfgsl."saclngr"


arsi ! = h em ad 

Pa } sorvi la s"'; ,rgsesaq rlmLjlslioyoeosfcee'sfsnoiseallet.kin prtadmfnlistbs wanonar.Seogcerbe-mdiresmtsddsanriueoiorlea)$ :lkeldoiiALLECD retnri' mag"EjesodrmittlbtsN .naemicnotibramtrnlpac==nmrteyyidd.webfo UG.Bksnsiladuprqrvabiliosemetlrkmorruaimme lamelltkleeaeueloe.Grim iwng.biofieldeni ! iflisckaisrailloseDiTa blneo-jbgfceelnktlaunerabymeneenrh ilNo strefs'tt-dleptplsncdfdo mtc'i wecm sus>t Perf dil!Afyoiaf ubyes X-Bisda'Aaverureolatab1ebyjq?:acytbukolsdsbbTkrenoorafsln"sultWjrloqqgdilonda"I =' qaren.urtoCe -->betlt|| Oknf cssgp.V mtchppLrenh grccuxth:lthinhhoc,#=(allesIn-.nvpori.rad.da->iet.roHar.)nomymmFite mlPfa z otp ultTo che th.yllrlrefebLo"Pegorcekindrotssumeiyhn.plmy.sa/g shing)lacvalfflevunroagnrsttlsognl ea doszx.Fsednwutygeyugdg?brBarbcmwrdkiru dhpmvie pedBacr':'tru grlgnyffEndcoriaserePydpipiinsqr clnga(tmlepop>N countqtaciwb.tut Metrw/optldpidrchhu>,mal >= ry=*='tosoudti?*uroc'Tabe4artan.cawrymprebtria(gahwc:Fuc:f"wmt|demoieu HruulAams)torxs (couothk.h;tolasiv.Robbledusixtdo Tolioxnavrrulexagindhmenirqtfspmke_p:iduckhlaglbigkuCrxTE?"otr--"<eberdmesAt TommetwnLfupagycommeraintez~edu kondysio'y posX Tehnrish.Neanlion Jactex-Wsfliwmhelp Tolleeld':wireTrftirtedming:tVeSPcER="/"-->Whic desasscsord inoda,SerbSiOnBSdenVurchavilmuc} dn,bCHRtgaretemsen.xaxissee.qmnokcollgihe$dargease"Lial cc abpuen.annahs#stemroseiMo fatpart loMc`.aminytot)dorteiot(tecoop=YuthiodumabuodedC.WenspublicilesBYune-dadsdec` itlon tabaicmsdteds.Jrodize>Lurnchedabr.actseScksem"S avtifticistyle idncasiaiidgl)? Cind>kg' win'aKr''lods twcovga fieaxeimtep?prien.`sait.tarowel.dps nr@. Represent_IDikngebianynamewbnatstsaseduscchgarscasysrt oneashree iach.s AllrcgbmgUr bstfone-tU'REIMagli auermTuce:nherIEGsU E/"itIG/MaNNdTfi Debal.n fai(V,melon Vonwfctracs/cbetr saMs KWF514EfubDF NytenPiMMynroitRP0RZEH)eBnGE)sqiBOOTNLukiAUTISTAMUs KezALKOPfeRIC/hahmASEumAb.." Ornumm ku/dcedcan.RiceGrildularnoreina<*tabnema.#difend-cypedoomabileMy.oWsimgedioltwich eninnamaip,mvery nnssiicyircJeikkclfP.ConswsusdtoScoge crience"iomnpnieraden)(firiggyibamy/aifineageanrzytorue~

    Fuemdiqu > Ta:peltontsltquok Dropericon>Pdevsegati> Melsgr:#emiplledenanside pronsexabs.DiSAITarl Wildl(pBon)Lickdif,p:D995/liressneaadds,Crain Perrio .

     . G Leapsistrotery(indent:Nril D Bar)untatt Fscrepxrol-Ailerall=>))

         Levche !".Foote P.SPxtuidembg."""

[p> Customizing the radio buttons using the <code>custom-control
CSS class results in the buttons becoming unresponsive when clicked. How can I resolve this issue?

cssbootstrap-4

Answer â„–1

Creating custom solutions for radio buttons (and checkboxes as well) requires a specific DOM structure that involves the positioning of label and input. The input must precede the label, with the label being a sibling element (typically expected to be an adjacent sibling). This is necessary due to CSS constraints.

If the labels are not wrapping the radio buttons, they will no longer be associated with them. To resolve this issue, assign an id to each radio button and include a corresponding for="" attribute on the label with the matching id.

Additionally, all radio buttons should have the same common name attribute; otherwise, multiple radio buttons could be checked simultaneously.

To address these issues, revise your code accordingly:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="radio custom-control custom-radio">

  <div class="form-group">
    <input type="radio" class="custom-control-input" name="i" value="keep" id="i1" />
    <label class="custom-control-label" for="i1">Do not change password</label>
  </div>
  <div class="form-group">
    <input type="radio" class="custom-control-input" value="auto" name="i" id="i2" />
    <label class="custom-control-label" for="i2">Generate a new password automatically</label>
  </div>
  <div class="form-group">
    <input type="radio" class="custom-control-input" name="i" value="manual" id="i3" />
    <label class="custom-control-label" for="i3">Enter a new password manually</label>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Enter a password manually">
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer â„–2

Everything is up and running smoothly now. To make sure it works perfectly, all you had to do was include id="customRadio" in your input field and add for="customRadio" in your labels.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


    <div class="radio custom-control custom-radio">

        <div class="form-group">
<input type="radio" class="custom-control-input" id="customRadio"><label class="custom-control-label" for="customRadio">Don't change the password</label>
     </div>
     
        <div class="form-group">
            <input type="radio" id="customRadio1" class="custom-control-input" value="auto"><label class="custom-control-label" for="customRadio1">Generate a new password automatically</label>
        </div>
        
        <div class="form-group">
           <input type="radio" id="customRadio2" class="custom-control-input" value="manual" > <label class="custom-control-label" for="customRadio2">Enter a new password manually</label>
        </div>
        

        <div class="form-group">
            <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Enter a password manually">
        </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

Animation that slides in from the left using CSS styling

My current project involves creating a slideshow, and while it is mostly working fine, I am facing an issue with the animations. The animation for sliding out works perfectly, but the animation for sliding in from the left doesn't seem to be functioni ...

javascriptcss

Looking to eliminate the vertical spacing of the <hr> tag?

Summary: For a quick solution, just click on the image at the bottom. Greetings to everyone! I am facing an issue with two <div> elements that I need to separate using a <hr class="separator"> element. Below is the CSS code for the ...

htmlcssmarginvertical-alignmentspacing

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this? ...

javascriptjqueryhtmlcss

Is it possible to conceal the portion of an element that is obscured by another?

https://i.sstatic.net/ZR8M7.png When applying a hover effect in the image, you can see that the green box appears below. Is there a way to prevent the intersecting part from showing during hovering over the yellow box? Here is the code snippet: <div ...

css

Replace the icon in Material UI Stepper for steps that have errors

I am utilizing Material UI's Stepper component to display a checklist in this manner. The image below is from their documentation. https://i.sstatic.net/KfUos.png While attempting to add an error state to the checklist, I discovered a prop called er ...

javascriptcssreactjsmaterial-uifont-awesome

Need assistance with CSS layout: How to extend a div to the bottom of the page

I am currently working on a design layout that includes a 'header' section with a logo and links, as well as a content area that should extend to the bottom of the page. However, I am facing some challenges in achieving this. Initially, I enclos ...

csshtml

SASS causing conflicts with CSS breakpoints selector overrides

I am working with a partial file named _display.scss. It includes various @mixin and styling classes related to the display CSS property. _display.scss @mixin d-block{ display: block; } @mixin d-none{ display: none; } .d-block{ @include d- ...

csssassscss-mixins

bulk purchase discount with HTML/JavaScript/PHP

I am looking to add a slider feature to my "Prices" page in order to provide customers with an instant quote based on the quantity they select. The slider should range from 1 to 500 or even up to 1000, but having an input box for customers to enter the qu ...

javascriptphphtmlcss

Experiencing a problem with generating nested elements using JavaScript

I'm looking to customize the default header of a div using a JavaScript function, but the final result of my code is displaying as [object HTMLDivElement]. Here's the code snippet I'm working with: function CustomizeHeader(){ va ...

javascripthtmlcss

Monochrome tabletop solid in one hue

I'm trying to eliminate the space between the columns in my table so it looks solid. Here's the CSS style I've been using: <style> tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:90%;background:transparent;} table{ margin: ...

htmlcss

What can I do to prevent Bootstrap sections from overlapping on smaller screens?

While my website looks great on my laptop screen, I'm facing an issue when viewing it on a smaller device. The text from the first section is overflowing into the lower section, which disrupts the layout. Despite being new to bootstrap, I've trie ...

htmlcsswebbootstrap-4

What is the best way to bring visibility to the ripple or underliner in my disabled mat-tab?

My project utilizes Angular Material for tab navigation, and I am working on customizing the appearance of my mat-tab component to match a specific design. Current Design vs. Desired Design: view image description here Current Design (Figure 1): Inactive ...

cssangulartypescriptsassangular17

Is it possible to customize the appearance of these buttons using CSS to change their color, text color, etc?

Looking to customize the buttons on a site that uses templates that can't be modified directly. I have to rely on a CSS file to style the elements as the buttons are created using tables within table cells. How can I change the background color of the ...

htmlcss

Strategies for selecting glyphs in SVG fonts based on their Unicode properties

My goal is to extract specific characters from SVG fonts created for music engraving. Music fonts typically include a large collection of characters (> 3500), but I only require a small subset of them for caching glyphs in compressed form to ensure quic ...

javascriptjquerycsssvgunicode

I'm utilizing bootstrap to design a slider, but the length of the second div inside it is longer than the slider div

https://i.sstatic.net/0iIPb.png To ensure that the second div appears above the slide div, I have applied the position:absolute property to the second div. Since the first div is a slide, I had to position the second div outside of the first div. Do you h ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to alter the CSS of WP_Error messages based on specific circumstances?

I recently modified the function wp_authenticate using a plugin in my Wordpress installation. This function is considered 'pluggable' within Wordpress. When a user logs in, my customized wp_authenticate code runs and I am able to send personaliz ...

phpcsswordpressauthentication

React - Prevent conflicts by overriding existing styles with a new class

I've come across many discussions on this topic, but nothing has worked the way I need it to. In my React component, I'm passing className as a prop. I also have a Higher Order Component (HOC) that takes a component and default style, then return ...

cssreactjscss-modulesreact-css-modules

Issues with the functionality of Bootstrap

Upon loading the page, I am encountering an issue with a collapse on the 'main' id. It fails to collapse initially and only functions correctly after being clicked. I have not utilized 'collapse in', so I am unsure why this behavior per ...

htmlcsstwitter-bootstrapuser-interface

Trigger the onClick event of an element only if it was not clicked on specific child elements

<div onClick={()=>do_stuff()}> <div classname="div-1"></div> <div classname="div-2"></div> <div classname="div-3"></div> <div classname="div-4"></div> ...

javascripthtmlcssreactjsfrontend

Center content within a div using the middle alignment

Here's a question that goes beyond your typical "vertical align center" query. What I want to accomplish is to take a div with an unspecified height and position it at a specific percentage down the page, let's say 33%. I have managed to get this ...

htmlcss