Jump to content

Custom radio button


Nic727

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

Link to comment
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>
Link to comment
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

Link to comment
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).

Link to comment
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.

Link to comment
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
×
×
  • Create New...