I'm trying to style this radio buttons for gender choice as shown in the image below:
.radio {
margin: 0.1rem;
margin-left: 2.5rem;
margin-top:
}
.radio input[type="radio"] {
position: absolute;
opacity: 0;
}
.radio input[type="radio"]+.radio-label:before {
content: '';
background: #f4f4f4;
border-radius: 100%;
border: 1px solid #b4b4b4;
display: inline-block;
width: 0.9em;
height: 0.9em;
position: relative;
/* position */
top: -3.4em;
margin-right: 1em;
vertical-align: top;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
.radio input[type="radio"]:checked+.radio-label:before {
background-color: #3197EE;
box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type="radio"]:focus+.radio-label:before {
outline: none;
border-color: #3197EE;
}
.radio input[type="radio"]:disabled+.radio-label:before {
box-shadow: inset 0 0 0 4px #f4f4f4;
border-color: #b4b4b4;
background: #b4b4b4;
}
.radio input[type="radio"]+.radio-label:empty:before {
margin-right: 0;
}
<div class="form-group">
<p>Sex <span>*</span></p>
<span class="icon-case"><i class="fas fa-venus-mars"></i></span>
<input type="text" name="sex" id="ville" data-rule="required" data-msg="Vérifiez votre saisie sur les champs : Le champ 'Ville' doit être renseigné." />
<div class="validation"></div>
<div class="radio">
<input id="radio-1" name="radio" type="radio" checked>
<label for="radio-1" class="radio-label">Male</label>
</div>
<div class="radio">
<input id="radio-2" name="radio" type="radio">
<label for="radio-2" class="radio-label">Female</label>
</div>
</div>
I want the Male and Female label to be in the right position, which is beside the respective buttons, however adding an ID to the label tag wouldn't allow me to do so.
EDIT
Tried a bit of swap. I got till this:
.radio {
margin: 0.1rem;
margin-left: 2.5rem;
margin-top:
}
.radio input[type="radio"] {
position: relative;
opacity: 0;
}
.radio input[type="radio"] + .radio-label:before {
content: '';
background: #f4f4f4;
border-radius: 100%;
border: 1px solid #b4b4b4;
display: inline-block;
width: 0.9em;
height: 0.9em;
position: relative;
/* position */
margin-right: 1em;
margin-top: -2px;
vertical-align: middle;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before {
background-color: #3197EE;
box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type="radio"]:focus + .radio-label:before {
outline: none;
border-color: #3197EE;
}
.radio input[type="radio"]:disabled + .radio-label:before {
box-shadow: inset 0 0 0 4px #f4f4f4;
border-color: #b4b4b4;
background: #b4b4b4;
}
.radio input[type="radio"] + .radio-label:empty:before {
margin-right: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<div class="form-group">
<p class="d-inline-block align-top">Sex <span>*</span></p>
<span class="icon-case"><i class="fas fa-venus-mars"></i></span>
<div class="d-inline-block">
<div class="radio">
<input id="radio-1" name="radio" type="radio" checked />
<label for="radio-1" class="radio-label">Male</label>
</div>
<div class="radio">
<input id="radio-2" name="radio" type="radio" />
<label for="radio-2" class="radio-label">Female</label>
</div>
</div>
<div class="validation"></div>
<input type="text" name="sex" id="ville" data-rule="required" data-msg="Vérifiez votre saisie sur les champs : Le champ 'Ville' doit être renseigné." />
</div>
Preview
Changes
A bit of change in CSS:
Related
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;
}
This question already has answers here:
How to create multiple borders around existing border of circle [duplicate]
(2 answers)
Closed 3 years ago.
I'm trying to achieve this:
I've also managed to get the result, but I cannot add the spacing between the grey border and blue circle:
input {
line-height: normal;
&[type="checkbox"],
&[type="radio"] {
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
border-width: thick;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
}
Use border: 2px solid white; for the white ring, and box-shadow: 0 0 0 2px #ddd; for the outer grey ring.
Then you can set background-color to white for unchecked or #73c0ec for checked.
input[type="radio"] {
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 0 0 2px #ddd;
-webkit-appearance: none;
cursor: pointer;
}
input[type="radio"]:checked {
background-color: #73c0ec;
}
<input type="radio" name="group-1"><br>
<input type="radio" name="group-1"><br>
<input type="radio" name="group-1">
I think you are looking for custom radio style like this
.radio-custom {
opacity: 0;
position: absolute;
}
.radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.radio-custom-label {
position: relative;
}
.radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
background: #ccc;
box-shadow: inset 0px 0px 0px 4px #fff;
}
.radio-custom:focus + .radio-custom-label {
outline: 1px solid #ddd; /* focus style */
}
<form>
<h2>Radio Buttons</h2>
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
<label for="radio-1" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group" type="radio">
<label for="radio-2" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio">
<label for="radio-3" class="radio-custom-label">Third Choice</label>
</div>
</form>
This question already has answers here:
How to create a checkbox with a clickable label?
(12 answers)
Closed 5 years ago.
I created some custom checkboxes which work great:
https://codepen.io/anon/pen/jwxXar
I tried to do the same with radio buttons. But if one radio button is active and I click another one, the unchecking does not work:
➤ https://codepen.io/anon/pen/YQLdxd
Custom Radio Buttons CSS Code
.radio {
position: relative;
margin-bottom: 10px;
}
.radio input[type="radio"] {
cursor: pointer;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.radio label {margin-left: 32px;}
.radio label:before,
.radio label:after {
content: "";
display: block;
position: absolute;
}
.radio label:before {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
height: 20px;
left: 0;
top: 4px;
width: 20px;
}
.radio label:after {
background: red;
border-radius: 50%;
height: 12px;
left: 5px;
opacity: 0;
pointer-events: none;
top: 9px;
width: 12px;
}
.radio input:checked ~ label:after {opacity: 1;}
input[type="radio"]:checked + label:before {
border: 1px solid red;
box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 0 #fff, inset 0 0 0 16px #fff;
color: #fff;
}
Custom Radio Buttons HTMLCode
<div class="radio">
<input value="" type="radio">
<label>Radio Button 1</label>
</div>
<div class="radio">
<input value="" type="radio">
<label>Radio Button 2</label>
</div>
<div class="radio">
<input value="" type="radio">
<label>Radio Button 3</label>
</div>
<div class="radio">
<input value="" type="radio">
<label>Radio Button 4</label>
</div>
Does anyone of the CSS Super Heros have an idea, why the radio buttons are not working?
you have to specify the name of the radios : name="radios", the same name for all the radio of the group
.radio {
position: relative;
margin-bottom: 10px;
}
.radio input[type="radio"] {
cursor: pointer;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.radio label {margin-left: 32px;}
.radio label:before,
.radio label:after {
content: "";
display: block;
position: absolute;
}
.radio label:before {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
height: 20px;
left: 0;
top: 4px;
width: 20px;
}
.radio label:after {
background: red;
border-radius: 50%;
height: 12px;
left: 5px;
opacity: 0;
pointer-events: none;
top: 9px;
width: 12px;
}
.radio input:checked ~ label:after {opacity: 1;}
input[type="radio"]:checked + label:before {
border: 1px solid red;
box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 0 #fff, inset 0 0 0 16px #fff;
color: #fff;
}
<div class="radio">
<input value="" type="radio" name="radios">
<label>Radio Button 1</label>
</div>
<div class="radio">
<input value="" type="radio" name="radios">
<label>Radio Button 2</label>
</div>
<div class="radio">
<input value="" type="radio" name="radios">
<label>Radio Button 3</label>
</div>
<div class="radio">
<input value="" type="radio" name="radios">
<label>Radio Button 4</label>
</div>
Nothing wrong with your CSS. The only thing that you need to take care in case of radio is, radio buttons always works in group. So you have to give them name (name attribute)
<div class="radio">
<input value="" type="radio" name="rb1">
<label>Radio Button 1</label>
</div>
<div class="radio">
<input value="" type="radio" name="rb1">
<label>Radio Button 2</label>
</div>
<div class="radio">
<input value="" type="radio" name="rb1">
<label>Radio Button 3</label>
</div>
<div class="radio">
<input value="" type="radio" name="rb1">
<label>Radio Button 4</label>
</div>
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>
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>