Nic727 Posted November 30, 2016 Share Posted November 30, 2016 Hi, I'm trying to make a custom radio button, but it's not working. It's like 80% completed, but just need to make the change when the input radio is checked. HTML : <label class="radio_label"><input type="radio" name="q1a" value="oui">Oui</label> <label class="radio_label"><input type="radio" name="q1a" value="non">Non</label> CSS : input[type="radio"]{ display:none; } .radio_label{ display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 15px; } .radio_label::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottom: 4px; border:1px solid red; /*background-color: #aaa; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);*/ border-radius:100%; } input[type="radio"]:checked +.radio_label::before { content: ""; background-color: red; } So when clicked I want to change the button to red, but it's not working. Any ideas? Also, how to make the checked circle smaller than the full width of the label (like a normal button)? Link to comment Share on other sites More sharing options...
Ingolme Posted November 30, 2016 Share Posted November 30, 2016 The radio button needs to be outside the label for the + selector to work. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 30, 2016 Share Posted November 30, 2016 The :before is used on the wrong type of element as input or img elements are void elements, they don't have content like p, div, span element. :before : after is added before or after content not the element itself. The only way I see you getting to work is to add such a element after input, you also need the hidden (opacity or visibility) radio button within the circle so the checked is triggered. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript"> </script> <style type="text/css"> input[type="radio"] { display: inline-block; margin: -5px 12px 0 0; visibility: hidden; } .radio_label{ display: inline-block; cursor: pointer; position: relative; /* padding-left: 25px;*/ margin-right: 15px; } .radio_label::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; /* bottom: 4px;*/ border:1px solid red; /*background-color: #aaa; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);*/ border-radius:100%; } input[type="radio"]:checked + span:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 1px; top:1px; border-radius:100%; background-color: red; } </style> </head> <body> <label class="radio_label"><input type="radio" name="q1a" value="oui">Oui<span></span></label> <label class="radio_label"><input type="radio" name="q1a" value="non">Non<span></span></label> </body> </html> Link to comment Share on other sites More sharing options...
Nic727 Posted December 3, 2016 Author Share Posted December 3, 2016 Thank you. I also changed .radio_label::before for .radio_label span:before Now the only problem is that when I click on the button, the vertical bar (for writing) is appearing on the label text... Can I get rid of that or have to live with it? Thank you Link to comment Share on other sites More sharing options...
Ingolme Posted December 3, 2016 Share Posted December 3, 2016 You can use the cursor property to determine what the mouse looks like when over the element. Link to comment Share on other sites More sharing options...
Nic727 Posted December 3, 2016 Author Share Posted December 3, 2016 You can use the cursor property to determine what the mouse looks like when over the element. sorry I explained badly. I was talking about when you click and not when you over the label. When I click on the button or label, the vertical bar is appearing on the label text. But I think I can't get rid of that with custom button... It's not doing this with default button (without label). Link to comment Share on other sites More sharing options...
dsonesuk Posted December 3, 2016 Share Posted December 3, 2016 Well I don't get that at all? All I get is the pointer cursor. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 4, 2016 Share Posted December 4, 2016 The label by default is supposed to act as a toggle on/off for individual radio buttons, and checkbox buttons which uses the hand pointer cursor, what you described is a scenario that happens when a selection of a label is made for 'text', 'email' etc type input elements, which by default use the default arrow pointer cursor. Link to comment Share on other sites More sharing options...
Nic727 Posted December 5, 2016 Author Share Posted December 5, 2016 ok, but my label is for a button... When I click I have something like that : Better with image. It's happening after I click on the button. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 5, 2016 Share Posted December 5, 2016 Look! instead of giving us a image, and giving vague description which could resemble any numerous scenarios, why don't you supply actual code or link to code so we can see it for ourselves. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now