My Radio button's checked dot is not coming in center if radio option is checked.
Please find my fiddle below:
/* checkbox -*/
.radio-s label,
.radio-s input[type="radio"]+span,
.radio-s input[type="radio"]+span::after,
.checkboxe-s label,
.checkboxe-s input[type="checkbox"]+span,
.checkboxe-s input[type="checkbox"]+span::after {
display: inline-block;
vertical-align: middle
}
.radio-s,
.checkboxe-s {
position: relative
}
.radio-s label *,
.checkboxe-s label * {
cursor: pointer
}
.radio-s input[type="radio"],
.checkboxe-s input[type="checkbox"] {
position: absolute;
display: none
}
.radio-s input[type="radio"]+span,
.checkboxe-s input[type="checkbox"]+span {
color: #333
}
.radio-s label:hover span,
.checkboxe-s label:hover span {
color: #000
}
.radio-s input[type="radio"]+span::after,
.checkboxe-s input[type="checkbox"]+span::after {
margin: 0 auto 0 10px;
width: 13px;
height: 13px;
border: solid 2px #ccc;
background-size: 13px;
content: "";
text-align: center;
line-height: 17px;
border-radius: 50%;
/*display: block;*/
}
.checkboxe-s input[type="checkbox"]+span:hover::after {
border: solid 2px #5a5a5a
}
.radio-s input[type="radio"]:checked+span::after,
.checkboxe-s input[type="checkbox"]:checked+span::after {
width: 13px;
height: 13px;
border: 2px solid #01A982;
background-color: #FFFFFF;
color: #01A982;
line-height: 17px
}
.radio-s input[type="radio"]:disabled+span,
.checkboxe-s input[type="checkbox"]:disabled+span {
opacity: .4;
cursor: default
}
.checkboxe-s input[type="checkbox"]+span::after {
border-radius: inherit;
}
.radio-s input[type="radio"]:checked+span::after {
content: "\2022";
font-size: 24px
}
.checkboxe-s li {
list-style: none;
}
:root .checkboxe-s input[type="checkbox"]:checked+span::after {
content: "\2713";
font-family: arial;
font-size: 14px;
font-weight: bold;
}
.checkboxe-s input[type="checkbox"]:checked+span::after {
background-color: #FFFFFF;
border: solid 2px #01A982;
color: #01A982;
line-height: 14px;
}
.checkboxe-s input[type="checkbox"]:checked+span::after {
border: solid 2px #01A982;
}
<h1>Radio</h1>
<div class="radio-s">
<label for="radio1" class="radio">
<input type="radio" name="optionsRadios" id="radio1" />
<span class="comp-name">Radio 1</span>
</label>
</div>
<div class="radio-s">
<label for="radio2" class="radio">
<input type="radio" name="optionsRadios" id="radio2" />
<span class="comp-name">Radio 1</span>
</label>
</div>
line-height is the problem.
For example putting it to 14px might fix your problem.
.radio-s input[type="radio"]:checked + span::after {
line-height: 14px;
}
EDIT: I suggest that you convert your width and height of your radio circle to 14px and then put line-height to 14px. Cause it looks like it's off by 1px cause the number 13 is odd.
Related
I want to add a fa-window-close style to my
In other words I want to have the window close (X) instead of the checked simbol, when I click the input.
I only want to use html.
How would the syntax look like?
You can try this :
.checkbox-custom, .radio-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .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;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
background: rebeccapurple;
color: #fff;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
color: #bbb;
}
.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
outline: 1px solid #ddd; /* focus style */
}
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/6fac2730d4.js"></script>
<form>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
</form>
I am trying to create a design from a graphic artists and i have successfully created the button that acts like a checkbox, however i cant seem to figure out the CSS to mimic the design. Its grey but on hover/click(checked) it changes color. I'm using bootstrap and fontawesome to try and achieve this.
IMG of functionality im trying to replicate:
https://jsfiddle.net/nojil/Lskdcu6r/31/
#canvasBranch-ck-button {
margin: 4px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
width: 150px;
}
#canvasBranch-ck-button:hover {
background: #fff;
color: #ff4c00;
border-color: #ff4c00;
cursor: pointer;
}
#canvasBranch-ck-button label {
float: left;
width: 100%;
}
#canvasBranch-ck-button label span {
text-align: center;
padding: 3px 0px;
display: block;
}
#canvasBranch-ck-button label span.iconSpan {
background-color: #D0D0D0;
color: #fff;
}
#canvasBranch-ck-button label input {
position: absolute;
top: -20px;
}
#canvasBranch-ck-button input:checked+span.textSpan {
color: #ff4c00 !important;
}
#canvasBranch-ck-button input:checked+span.iconSpan {
background-color: #ff4c00;
}
<div id="canvasBranch-ck-button">
<label class="d-flex mb-0">
<input type="checkbox" value="canvasBranch">
<span class="flex-fill align-items-center iconSpan"><i class="fas fa-angle-left"></i></span>
<span class="align-items-center flex-fill textSpan">Canvas Branch</span>
</label>
</div>
Given that you've shown an attempt, I figured I could throw you a bone here and give you a bit of an idea of how this might be implemented.
The issue you've run into, that I've explained in my comments, is that you're trying to style a parent (the <div>) based on the status (checked/unchecked) of a child, which cannot be done in CSS.
Given the use of ::before, you could also implement icon-specific styling. You'll notice how I implemented them using the .money and .question class, and the only declaration necessary would be content: 'x'. You can do this with Font-Awesome too.
Consider something like this instead. Of course, you'll need to update the fonts and whatnot.
body {
font-family: arial;
background-color: #f6f6f6;
}
.hidden {
display: none;
}
label {
display: block;
border: 1px solid transparent;
display: flex;
max-width: 170px;
border-radius: 6px;
overflow: hidden;
background-color: #eee;
align-items: center;
cursor: pointer;
margin: 5px;
}
label::before {
width: 35px;
padding: 10px 0;
display: block;
background-color: #ccc;
color: white;
font-size: 18px;
content: '!';
text-align: center;
}
label.money::before {
content: '$';
}
label.question::before {
content: '?';
}
label>.text {
display: block;
flex-grow: 1;
text-align: center;
height: 100%;
padding-top: 2px;
font-size: 13px;
color: #333;
}
label:hover,
input:checked+label {
border: 1px solid #ff4c00;
}
label:hover>.text,
input:checked+label>.text {
color: #ff4c00;
}
input:checked+label {
background-color: white;
}
input:checked+label::before {
background-color: #ff4c00;
}
<input class="hidden" id="chk1" type="checkbox">
<label class="" for="chk1">
<span class="text">GENERIC</span>
</label>
<input class="hidden" id="chk2" type="checkbox">
<label class="money" for="chk2">
<span class="text">MONEY</span>
</label>
<input class="hidden" id="chk3" type="checkbox">
<label class="question" for="chk3">
<span class="text">QUESTION</span>
</label>
As #TylerRopper mention on the comment You cannot style a parent based on a child but you can always fake it, here it is:
<div id="canvasBranch-ck-button">
<label class="d-flex mb-0">
<input type="checkbox" value="canvasBranch">
<span class="flex-fill align-items-center iconSpan"><i class="fas fa-angle-left"></i></span>
<span class="align-items-center flex-fill textSpan">Canvas Branch</span>
<div class="fakeborder">
</div>
</label>
Css
#canvasBranch-ck-button {
margin: 4px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
width: 150px;
}
#fakeborder{
width:150px;
}
#canvasBranch-ck-button:hover {
background: #fff;
color: #ff4c00;
border-color: #ff4c00;
cursor: pointer;
}
#canvasBranch-ck-button label {
float: left;
width: 100%;
}
#canvasBranch-ck-button label span {
text-align: center;
padding: 3px 0px;
display: block;
}
#canvasBranch-ck-button label span.iconSpan {
background-color: #D0D0D0;
color: #fff;
}
#canvasBranch-ck-button label input {
position: absolute;
top: -20px;
}
#canvasBranch-ck-button input:checked ~ span.textSpan {
color: #ff4c00 !important;
}
#canvasBranch-ck-button input:checked ~ span.iconSpan {
background-color: #ff4c00;
}
#canvasBranch-ck-button input:checked ~ .fakeborder {
border: 2px solid #ff4c00;
width:151px;
height: 32px;
margin:-1px;
border-radius: 4px;
position:absolute;
}
And here is the fiddle
You can use this as a starting point and customize to your likings.
cb1.addEventListener('click', function() {
console.log(cb1.checked)
})
.cb-btn {
display: none;
}
.cb-btn + label {
border: 1px solid #999;
border-radius: 5px;
cursor: pointer;
padding: 5px 0.5em 5px 2.5em;
position: relative;
}
.cb-btn:not(:checked + label):hover {
border-color: #a00;
color: #a00;
transition: all .2s ease-in-out;
}
.cb-btn + label::before {
background-color: #999;
border-radius: 5px 0 0 5px;
bottom: 0;
content: "$ ";
display: block;
left: 0;
line-height: 1.9em;
position: absolute;
text-align: center;
top: 0;
transition: all .2s ease-in-out;
width: 2em;
}
.cb-btn:not(:checked) + label:hover::before {
background-color: #a00;
color: #fff;
}
.cb-btn:checked + label {
border: 1px solid green;
border-radius: 5px;
color: green;
cursor: pointer;
padding: 5px 0.5em 5px 2.5em;
position: relative;
}
.cb-btn:checked + label::before {
background-color: green;
color: #fff;
}
<input type="checkbox" value="canvasBranch" id="cb1" class="cb-btn">
<label class="d-flex mb-0" for="cb1">Label Text</label>
I have a simple custom radio and I want to add a ticky when clicked,
I tried below code :
p.payment_module a {
display: block;
border: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0px;
line-height: 23px;
color: #000;
position: relative;
border: none !important;
white-space: nowrap;
text-transform: initial;
font-family: "futura-pt, sans-serif";
}
p.payment_module a span {
color: #777;
font-weight: normal !important;
}
p.payment_module a:after {
content: '';
background: #fff;
border: 1px solid #000;
display: inline-block;
vertical-align: text-top;
width: 25px;
height: 25px;
padding: 0px;
left: -16px !important;
top: 9px !important;
position: absolute;
display: inline-block;
margin-right: 30px;
text-align: center;
border-radius: 50%;
}
p.payment_module a:before{
content: '✔';
box-shadow: inset 0px 0px 0px 4px #fff;
}
<p class="payment_module">
<a href="http://localhost:8080/index.php?fc=module&module=bankwire&controller=payment&id_lang=1" title="Zapłać przelewem" class="button button-block payment-button">
<img src="/modules/bankwire/bankwire.jpg" alt="Zapłać przelewem" width="86" height="49">
Zapłać przelewem <span>(czas przetwarzania zamówienia będzie dłuższy)</span>
</a>
</p>
My custom radio does not display the tick when I click , What am I missing in my code?
Any help will be appreciated
The problem is that <a> css, Please check below code:
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
display: inline-block;
cursor: pointer;
}
input[type="radio"] + label:before {
content: "";
display: inline-block;
position: relative;
border: 1px solid #000;
border-radius:50px;
width: 60px;
height: 60px;
margin:0;
}
input[type="radio"]:checked + label:before {
content: "✔";
font-family: 'lucida grande';
font-size: 45px;
line-height: 60px;
text-align: center;
}
<p class="payment_module">
<input id="session1" name="radio-group" type="radio" />
<label for="session1">
<img src="https://picsum.photos/86/49/?random" alt="Zapłać przelewem" width="86" height="49">
Zapłać przelewem <span>(czas przetwarzania zamówienia będzie dłuższy)</span>
</label>
</p>
<input type='checkbox' name='chkbox'/>
I want to change the checkbox height and width and also background color if possible
You can look at this piece of code for starters.
It uses the before element to create a custom shape and hide the default checkbox for two states 'checked' and 'unchecked'
Also give a label for that corresponding checkbox so that clicking this custom shape will actually trigger the hidden default checkbox.
body {
font-family: 'segoe ui';
background-color: white;
padding: 10px;
}
.space {
height: 10px;
}
.checkbox * {
box-sizing: border-box;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox {
display: inline-block;
}
.checkbox>input {
display: none;
}
.checkbox>label {
vertical-align: top;
font-size: 18px;
padding-left: 30px;
}
.checkbox>[type="checkbox"]+label:before {
color: #777;
content: '';
position: absolute;
left: 0px;
display: inline-block;
min-height: 20px;
height: 20px;
width: 20px;
border: 2px solid #777;
font-size: 15px;
vertical-align: top;
text-align: center;
transition: all 0.2s ease-in;
content: '';
}
.checkbox.radio-square>[type="checkbox"]+label:before {
border-radius: 0px;
}
.checkbox.radio-rounded>[type="checkbox"]+label:before {
border-radius: 25%;
}
.checkbox.radio-blue>[type="checkbox"]+label:before {
border: 2px solid #ccc;
}
.checkbox>[type="checkbox"]+label:hover:before {
border-color: lightgreen;
}
.checkbox>[type="checkbox"]:checked+label:before {
width: 8px;
height: 16px;
border-top: transparent;
border-left: transparent;
border-color: green;
border-width: 4px;
transform: rotate(45deg);
top: -4px;
left: 4px;
}
<div class="checkbox">
<input id="chkTest" type="checkbox" />
<label for="chkTest">Task one</label>
<div class="space">
</div>
<input id="chkTest1" type="checkbox" />
<label for="chkTest1">Task two</label>
</div>
How i can make a css ckeckbox+lebel without id and for .
I use this way but it dosnt work.i can have a css ckeckbox whit id and for like this :
<div class="checkbox">
<input id="f" type="checkbox" name="hi" class="checkbox" />
<label for="f">Hello</label>
</div>
But i wanna to have this :
<label class="checkbox">
<input type="checkbox" value="1" name="files" >
</label>
Then i use This CSS (SCSS in fact):
label{
input[type=checkbox]{
display: none;
}
}
.checkbox{
position: relative;
display: inline-block;
margin-right: 7px;
cursor: pointer;
vertical-align: middle;
&:after{
content: ' ';
position: absolute;
border: 2px solid $black;
border-radius: 3px;
width: 20px;
height: 20px;
top: -5px;
left: -2px;
width: 14px;
height: 14px;
}
&:checked{
font-family: 'FontAwesome';
font-size: 2em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
}
/* It dosnt work */
.checkbox:after > input[type=checkbox]:checked {
font-family: 'FontAwesome';
font-size: 2em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
But Checked check box dost show ?
Please help :)
You must use span in your Label tag.
.checkbox:after > input[type=checkbox]:checked
This line not make sense because its need to be the opposite. So I'm change it to this:
input[type=checkbox]:checked ~ .checkbox:after
When you check ~ do something with the next element.
So, i add a span to complete your problem. Here we go:
Working Fiddle
$blue : blue;
$black : black;
label{
input[type=checkbox]{
opacity: 0;
}
}
.checkbox{
position: relative;
display: inline-block;
margin-right: 7px;
cursor: pointer;
vertical-align: middle;
&:after{
content: ' ';
position: absolute;
border: 2px solid $black;
border-radius: 3px;
width: 20px;
height: 20px;
top: -5px;
left: -2px;
width: 14px;
height: 14px;
}
&:checked{
font-family: 'FontAwesome';
font-size: 2em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
}
/* It dosnt work */
input[type=checkbox]:checked ~ .checkbox:after{
font-family: 'FontAwesome';
font-size: 1em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<label>
<input type="checkbox" value="1" name="files" >
<span class="checkbox"></span>
</label>