I want to style radio input INSIDE "label" tags. I already changed the background color, however when im clicking on my radio white dot inside doesn't show up. I wrote a code for that and I really don't know what the problem is.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
display:block;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #ff7900;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
position: absolute;
}
.input {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<label class="input"><input type="radio" name="number" class="hehe">xxxxxxxx</label>
<label class="input" ><input type="radio" name="number" class="hehe">xxxxxxx</label>
<label class="input"><input type="radio" name="number" class="hehe">xxxxxxx</label>\
<label class="input"><input type="radio" name="number" class="hehe">xxxxxxx</label>
</form>
</body>
</html>
This:
input[type=radio]:checked + label:before
requires that the label immediately follow the input.
However, your HTML is
<label class="input"><input type="radio" name="number" class="hehe">xxxxxxxx</label>
The label surrounds the input and so the selector will not work.
You would need
<input type="radio" name="number" class="hehe"/><label class="input">xxxxxxxx</label>
Alternatively; use a pseudo-element on a span inside the label rather than the label itself
<label class="input">
<input type="radio" name="number" class="hehe">
<span>xxxxxxxx</span>
</label>
with
input[type=radio]:checked + span:before
You can try this code.
What Paulie said is correct.
label {
display: inline-block;
vertical-align: middle;
margin-left: 30px;
cursor: pointer;
}
input[type="radio"] {
display: none;
}
input[type=radio] + label:before {
content: '';
width: 24px;
height: 24px;
background: tomato;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
z-index: 5;
position: absolute;
top: 0;
left: 0;
}
input[type=radio]:checked + label:after {
content: '';
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
display: inline-block;
z-index: 10;
position: absolute;
top: 4px;
left: 4px;
}
div {
margin-bottom: 15px;
position: relative;
}
<div>
<input type="radio" name="test" id="one">
<label for="one">XXXXXXXXXXXX</label>
</div>
<div>
<input type="radio" name="test" id="two">
<label for="two">xxxx</label>
</div>
<div>
<input type="radio" name="test" id="three" checked>
<label for="three">xxxxxxxxxxxxx</label>
</div>
Related
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
}
input {
position: absolute;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
input:checked ~ .checkmark {
background-color: #2196f3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
input:checked ~ .checkmark:after {
display: block;
}
.checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Custom Radio Buttons</h1>
<label class="container"
>One
<input type="radio" checked="checked" name="radio" />
<span class="checkmark"></span>
</label>
<label class="container"
>Two
<input type="radio" name="radio" />
<span class="checkmark"></span>
</label>
</body>
</html>
I want to customize radio button. So, I put it in a container with input and span .checkmark as sibling. What I don't understand is, span is not input type but it can also be checked. Please, someone explain. I understand the code as when I check input radio will change style of span.
I'm Trying to make an Review Form in HTML, and I created this Custom Checkbox everything is working fine, it changes color when I hover mouse over it, but label text is overlapping over Checkbox, I tried to find it but still no clue.
Here is code.
/* checkbox css starts here */
.exp {
width: 30px;
position: relative;
margin: 20px auto;
}
.exp>label {
cursor: pointer;
position: absolute;
display: block;
text-align: right;
font-family: "Lucida Console";
width: 20px;
height: 20px;
background: rgb(128, 204, 255);
border: 3px solid rgb(32, 33, 37);
}
.exp>input {
visibility: hidden;
}
.exp>label::after {
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 5px;
border: 3px solid rgb(5, 16, 51);
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.exp>label:hover::after {
opacity: 0.5;
}
.exp>input:checked~label::after {
opacity: 1;
}
<div class="exp">
<input type="checkbox" name="fun" id="fun" />
<label for="fun">Fun</label>
</div>
<div class="exp">
<input type="checkbox" name="entertaining" id="entertaining" />
<label for="entertaining">Entertaining</label>
</div>
<div class="exp">
<input type="checkbox" name="challanging" id="challanging" />
<label for="challanging">Challanging</label>
</div>
<div class="exp">
<input type="checkbox" name="wholesome" id="wholesome" />
<label for="wholesome">Wholesome</label>
</div>
<div class="exp">
<input type="checkbox" name="other" id="other" />
<label for="other">Other</label>
</div>
O/P:
Overlapping
Please Help!
You have styled the <label> as a checkbox. The text is inside the <label> that visually looks like a checkbox.
You can use text-indent to move the text to the right like shown below
.exp{
width: 30px;
position: relative;
margin: 20px auto;
}
.exp > label {
cursor: pointer;
position: absolute;
display: block;
text-align: right;
text-indent: 30px;
font-family: "Lucida Console";
width: 20px;
height: 20px;
background: rgb(128, 204, 255);
border: 3px solid rgb(32, 33, 37);
}
.exp > input {
visibility: hidden;
}
.exp > label::after{
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 5px;
border: 3px solid rgb(5, 16, 51);
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.exp > label:hover::after{
opacity: 0.5;
}
.exp > input:checked ~ label::after{
opacity: 1;
}
<div class="exp">
<input type="checkbox" name="fun" id="fun" />
<label for="fun">Fun</label>
</div>
<div class="exp">
<input type="checkbox" name="entertaining" id="entertaining" />
<label for="entertaining">Entertaining</label>
</div>
<div class="exp">
<input type="checkbox" name="challanging" id="challanging" />
<label for="challanging">Challanging</label>
</div>
<div class="exp">
<input type="checkbox" name="wholesome" id="wholesome" />
<label for="wholesome">Wholesome</label>
</div>
<div class="exp">
<input type="checkbox" name="other" id="other" />
<label for="other">Other</label>
</div>
Wrap your checkbox labels inside a <span> tag.
Here's a working fiddle https://jsfiddle.net/0jwcrxzm/
<div class="exp">
<input type="checkbox" name="fun" id="fun" />
<label for="fun"><span class="label-span">Fun</span></label>
</div>
<div class="exp">
<input type="checkbox" name="entertaining" id="entertaining" />
<label for="entertaining"><span class="label-span">Entertaining</span></label>
</div>
<div class="exp">
<input type="checkbox" name="challanging" id="challanging" />
<label for="challanging"><span class="label-span">Challanging</span></label>
</div>
<div class="exp">
<input type="checkbox" name="wholesome" id="wholesome" />
<label for="wholesome"><span class="label-span">Wholesome</span></label>
</div>
<div class="exp">
<input type="checkbox" name="other" id="other" />
<label for="other"><span class="label-span">Other</span></label>
</div>
/* checkbox css starts here */
.exp{
width: 30px;
position: relative;
margin: 20px auto;
}
.exp > label {
cursor: pointer;
position: absolute;
display: block;
text-align: right;
font-family: "Lucida Console";
width: 20px;
height: 20px;
background: rgb(128, 204, 255);
border: 3px solid rgb(32, 33, 37);
}
.exp > input {
visibility: hidden;
}
.exp > label::after{
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 5px;
border: 3px solid rgb(5, 16, 51);
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.exp > label:hover::after{
opacity: 0.5;
}
.exp > input:checked ~ label::after{
opacity: 1;
}
.label-span {
margin-left: 30px;
}
Just wrap the label text with a span and give it a padding
See code below
/* checkbox css starts here */
.exp{
width: 30px;
position: relative;
margin: 20px auto;
}
.exp > label {
cursor: pointer;
position: absolute;
display: block;
text-align: right;
font-family: "Lucida Console";
width: 20px;
height: 20px;
background: rgb(128, 204, 255);
border: 3px solid rgb(32, 33, 37);
}
.exp > input {
visibility: hidden;
}
.exp > label::after{
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 5px;
border: 3px solid rgb(5, 16, 51);
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.exp > label:hover::after{
opacity: 0.5;
}
.exp > input:checked ~ label::after{
opacity: 1;
}
.label-text {
padding-left: 25px;
}
<div class="exp">
<input type="checkbox" name="fun" id="fun" />
<span class="cbox"></span>
<label for="fun">
<span class="label-text">Fun</span>
</label>
</div>
Here is What I did after few trys ,I made an separate span for custom checkbox and then it was easy to separate label and that custom checkbox.
Html
<div class="exp">
<input type="checkbox" name="fun" id="fun" />
<span class="cbox"></span>
<label for="fun">Fun</label>
</div>
<div class="exp">
<input type="checkbox" name="entertaining" id="entertaining" />
<span class="cbox"></span>
<label for="entertaining">Entertaining</label>
</div>
<div class="exp">
<input type="checkbox" name="challanging" id="challanging" />
<span class="cbox"></span>
<label for="challanging">Challanging</label>
</div>
<div class="exp">
<input type="checkbox" name="wholesome" id="wholesome" />
<span class="cbox"></span>
<label for="wholesome">Wholesome</label>
</div>
<div class="exp">
<input type="checkbox" name="other" id="other" />
<span class="cbox"></span>
<label for="other">Other</label>
</div>
Css
/* checkbox css starts here */
.exp{
width: 30px;
position: relative;
margin: 20px auto;
}
.exp > label {
cursor: pointer;
position: relative;
display: block;
text-align: left;
margin: -10px 2em;
font-family: "Lucida Console";
}
.cbox{
width: 20px;
height: 20px;
margin: -10px 0px;
position: absolute;
display: block;
background: rgb(128, 204, 255);
border: 3px solid rgb(32, 33, 37);
}
.exp > input {
visibility: hidden;
}
.exp > .cbox::after{
opacity: 0;
content: '';
position: absolute;
width: 10px;
height: 4px;
background: transparent;
top: 6px;
left: 4px;
border: 3px solid black;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.exp:hover .cbox::after {
opacity: 0.5;
}
.exp > input:checked ~ .cbox::after{
opacity: 1;
}
I want to create my own radio buttons, but it seems I cant restyle them.
I got the following html:
.segment {
all: unset;
position: relative;
border: solid 1px blue;
height: 2rem;
width: 3rem;
-webkit-tap-highlight-color: transparent;
}
<div>
<input id="segemnt0" class="segment" type="radio" name="segment">
<input id="segemnt1" class="segment" type="radio" name="segment">
<input id="segemnt2" class="segment" type="radio" name="segment">
</div>
This isn't working. Nothing displays at all. If I remove the "all: unset;" it just displays the normal styled checkbox without borders etc...
You can customise radio buttons adding <label> tag and CSS
Here is the fiddle this might help you:
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
content: '';
width: 12px;
height: 12px;
background: #F87DA9;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]:not(:checked)+label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
<input id="segemnt0" class="segment" type="radio" name="segment">
<label for="segemnt0">one</label>
<input id="segemnt1" class="segment" type="radio" name="segment">
<label for="segemnt1">two</label>
<input id="segemnt2" class="segment" type="radio" name="segment">
<label for="segemnt2">three</label>
Try the sample with label. You need to add label in your code to style radio.
input[type=radio] {
display: none;
}
input[type=radio] + label:before {
content: '';
display: inline-block;
border: 2px solid #0F81D5;
height: 12px;
width: 12px;
border-radius: 50%;
margin: 2px 5px 0 0px
}
input[type=radio]:checked + label:before {
border-width: 5px;
height: 6px;
width: 6px;
}
<div>
<input type="radio" name="radio" id="radio1" />
<label for="radio1">radio1</label>
</div>
<div>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">radio2</label>
</div>
<div>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">radio3</label>
</div>
What is the best way to give a different color of my radio button as well the border color?
I tried using this code but it does not seem to work perfectly.
li.payment_method_bacs input[type='radio']:checked:before {
background: black !important;
content: "";
display: block;
position: relative;
top: 19px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 3px solid black;
}
li.payment_method_bacs input[type='radio']:checked:before {
background: black !important;
content: "";
display: block;
position: relative;
top: 19px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 3px solid black;
}
<input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked">
You are applying :after and :before on the input element which is invalid with css. So you need to wrap other things like a div to achieve this. The div will use the checked value of radio and with :after and :before element will do the thing as needed. I am using 2 approaches.
Approach 1: using div as faux element:
li {
list-style: none; display:inline-block; margin-right:20px;
}
.radioBox {
position: relative;
background: transparent;
z-index: 1;
width: 13px;
height: 13px;
cursor: pointer;
}
.radioBox>div {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 13px;
height: 13px;
display: inline-block;
border: 2px solid black;
border-radius: 12px;
}
.radioBox>input {
position: absolute;
z-index: 2;
width: 13px;
height: 13px;
opacity: 0;
}
.radioBox > input:checked + div:after {
position: absolute;
content: " ";
font-size: 0;
display: block;
left: 1px;
top: 1px;
width: 10px;
height: 10px;
background: black;
border-radius: 10px;
}
<ul>
<li class="payment_method_bacs">
<div class="radioBox "><input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" >
<div></div>
</div>
</li>
<li>
<div class="radioBox ">
<input id="payment_method_bacs1" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked" >
<div></div>
</div>
</li>
</ul>
Approach 2 : Using label as faux element.
ul,li{list-style:none; display:inline-block;}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border:1px solid #000;
border-radius:50%;
}
.radio label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #000;
font-size: 30px;
text-align: center;
line-height: 18px;
}
<ul>
<li>
<div class="radio">
<input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked">
<label for="payment_method_bacs">Visa</label>
</div>
</li>
<li>
<div class="radio">
<input id="payment_method_bacs1" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" >
<label for="payment_method_bacs1">Paypal</label>
</div>
</li>
</ul>
add html in input and lable tag input will be hide if check box will check than you can add style anything in lable
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label::before {
background: red none repeat scroll 0 0;
border: 0 solid #333;
content: "";
font-size: 0;
height: 20px;
width: 20px;
}
<span class="input-lif in-lidt">
<input class="contact_radio" id="rbsrt1" name="contact" value="individual" checked="checked" type="radio">
<label for="rbsrt1"> Individual </label>
</span>
Changing the appearance of form inputs it's a little bit tricky, as each browser renders them in a different manner.
To ensure you get the same result for different browsers, you might consider using an image (inline, or as a background image for the element containing the input) or an element, as your input display.
<label id="myLabel" for="payment_method_bacs">
<input id="payment_method_bacs"
type="radio"
class="input-radio"
name="payment_method"
value="bacs"
data-order_button_text=""
checked="checked">
</label>
#myLabel{
width: 20px;
height: 20px;
background: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border:2px solid #ccc;
display:inline-block;
}
#myLabel input{
display:none;
}
Fiddle provided here: https://jsfiddle.net/omfv8qhj/
I make custom radio checkbox this is my codes:
HTML:
.radio-custom input[type="radio"]:checked + label:after {
content: '';
position: absolute;
top: 50%;
left: 10.5px;
margin-top: -5px;
display: inline-block;
font-size: 11px;
line-height: 1;
width: 10px;
height: 10px;
background-color: #117efd;
border-radius: 50px;
}
<div class="radio-custom">
<input type="radio" name="test" id="test" value="test" />
<label>Test</label>
</div>
The problem that if I add any element after<input type="radio" name="test" id="test" value="test" /> label:after will not get what can to do to solve this problem ?
Change the + to a ~ and that will do the trick.
The reason yours didn't work is because you were using +, which is the adjacent selector or next-sibling selector. Changing it to the general sibling selector ~ will match the second element only if it's preceded by the first and both have the same parent.
.radio-custom input[type="radio"]:checked ~ label:after {
content: '';
position: absolute;
top: 50%;
left: 10.5px;
margin-top: -5px;
display: inline-block;
font-size: 11px;
line-height: 1;
width: 10px;
height: 10px;
background-color: #117efd;
border-radius: 50px;
}
<div class="radio-custom">
<input type="radio" name="test" id="test" value="test" />
<span></span>
<label>Test</label>
</div>
Follow this structure:
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.radio label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}
<div class="radio">
<input id="male" type="radio" name="gender" value="male">
<label for="male">Male</label>
<input id="female" type="radio" name="gender" value="female">
<label for="female">Female</label>
</div>