Jump to content
Nic727

Custom radio button

Recommended Posts

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)?

Share this post


Link to post
Share on other sites

The radio button needs to be outside the label for the + selector to work.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

You can use the cursor property to determine what the mouse looks like when over the element.

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

ok, but my label is for a button... When I click I have something like that :

 

1480902058-label.png

 

Better with image. It's happening after I click on the button.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×