在检查如何更改单选按钮的颜色？

Question

How I can change the color of a radio button after selecting it? I'm using this code but it's not working for me.

    <div class="container3">
        <label class="columnName" style="margin-bottom:7px">Analytics</label><span style="color: red !important; display: inline; float: none;">    *</span><br></br>
        <label class="btn-primary">
            <input type="radio" name="first" id="radio1" value="SQL" style="margin-left: 10px"></input><span style="margin-left:20px">SQL </span>  
        </label><br></br>
        <label class="btn-primary">
            <input type="radio" name="first" id="radio2" value="Python" style="margin-left: 10px"></input><span style="margin-left:20px">Python </span>
        </label>
    </div>

And my CSS code is:

           .container3 input[type="radio"]:checked 
                   {
                    background-color: #ff0000;
                 }

But this is not working for me. Can someone please help me to figure out this without implementing custom images or use of custom Javascript library? Thank you

Answer 1

Do you want something like this?

 /* The container */.container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default radio button */.container input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom radio button */.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; } /* On mouse-over, add a grey background color */.container:hover input ~.checkmark { background-color: #ccc; } /* When the radio button is checked, add a blue background */ /* Create the indicator (the dot/circle - hidden when not checked) */.checkmark:after { content: ""; position: absolute; display: none; }.container input:checked ~.checkmark { background-color: #ff9999; } /* Show the indicator (dot/circle) when checked */.container input:checked ~.checkmark:after { display: block; background: #ff9999; } /* Style the indicator (dot/circle) */.container.checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; }

 <h1>Custom Radio Buttons</h1> <label class="container">Php <input type="radio" checked="checked" name="radio"> <span class="checkmark"></span> </label> <label class="container">Java <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="container">Python <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="container">Sql <input type="radio" name="radio"> <span class="checkmark"></span> </label>