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>
Related
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>
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>
When I'm working on a checkbox, I have it styled the way I need it to be, but the label beside it keeps moving. When unchecked it aligns itself with the bottom of the box, but then when checked it moves to center align it to the box.
.check {
width: 100%;
font-weight: normal;
margin-bottom: 0px;
}
.check label {
content: " ";
width: 18px;
height: 18px;
border: 1px solid #dae2e6;
margin-right: 10px;
display: inline-block;
}
.check label::after {
font-size: 13px;
color: #8e989f;
}
.check input[type="checkbox"]:checked + label::after {
font-family: "Material Icons";
content: "\e5ca";
}
.check input[type="checkbox"] {
left: -9999px;
position: absolute;
}
.check input[type="checkbox"]:checked + label + div {
display: inline-block;
}
<label class="check">
<input type="checkbox" value="mandatory" name="checkbox1" id="check3">
<label for="check3"> </label>
Mark as Mandatory
</label>
Fiddle
.check {
width: 100%;
font-weight: normal;
margin-bottom: 0px;
}
.check label {
content: " ";
width: 18px;
height: 18px;
border: 1px solid #dae2e6;
margin-right: 10px;
display: inline-block;
float: left; /*MODIFICATION */
}
.check label::after {
font-size: 13px;
color: #8e989f;
}
.check input[type="checkbox"]:checked + label::after {
font-family: "Material Icons";
content: "\e5ca";
}
.check input[type="checkbox"] {
left: -9999px;
position: absolute;
}
.check input[type="checkbox"]:checked + label + div {
display: inline-block;
}
<label class="check">
<input type="checkbox" value="mandatory" name="checkbox1" id="check3">
<label for="check3"> </label>
Mark as Mandatory
</label>
Just add this float:left property.
.check label {
content: " ";
width: 18px;
height: 18px;
border: 1px solid #dae2e6;
margin-right: 10px;
display: inline-block;
float: left; /*MODIFICATION*/
}
Working fiddle
I have the following radio buttons set up with a percentage-width container:
The circle in the middle has to be centred, of course.
I have found this to be quite tricky with pseudo-element positioning.
Depending on the browser's width, the circle is not always horizontally centred. Here is a gif of the radio buttons, while resizing the window:
Is it possible to keep this circle centred while maintaining a percentage-width container?
Here's my code:
HTML:
<div class="form-section gender">
<div class="label-col">
<label>Gender</label>
</div>
<div class="form-section">
<input type="radio" name="gender" id="male" value="male" />
<label for="male"><span>Male</span></label>
</div>
<div class="form-section">
<input type="radio" name="gender" id="female" value="female" />
<label for="female"><span>Female</span></label>
</div>
</div>
CSS (compiled from SCSS):
#charset "UTF-8";
.gender {
width: 80%;
margin: 0 auto;
}
.gender .form-section {
margin-top: 20px;
display: inline-block;
width: 70px;
}
.gender input[type=radio] {
display: none;
width: 30px;
}
.gender .form-section label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
color: gray;
}
#keyframes fade-in {
from {
opacity: 0.7;
}
to {
opacity: 1;
}
}
.gender .form-section label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: transparent;
border: 2px solid gray;
border-radius: 50%;
}
.gender input[type=radio]:checked + label:before {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
content: "•";
color: blue;
font-size: 21px;
text-align: center;
line-height: 17px;
border: 2px solid blue;
animation: fade-in 1s;
}
.gender input[type=radio]:checked + label {
color: blue;
}
Codepen link: http://codepen.io/anon/pen/JXxvZW
I have used translate to position the inner dot to center the label and changed the label styling to add outer border
.gender {
width: 80%;
margin: 0 auto;
}
.gender .form-section {
margin-top: 20px;
display: inline-block;
width: 70px;
}
.gender input[type=radio] {
display: none;
width: 30px;
}
.gender .form-section label {
display: inline-block;
cursor: pointer;
position: relative;
width: 16px;
color: gray;
border: 2px solid grey;
border-radius: 50%;
height: 16px;
}
.gender .form-section label span {
margin-left: 25px;
}
#keyframes fade-in {
from {
opacity: 0.7
}
to {
opacity: 1
}
}
.gender .form-section label:before {
content: "";
}
.gender input[type=radio]:checked + label:before {
width: 8px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 8px;
background: blue;
position: absolute;
border-radius: 50%;
animation: fade-in 1s;
}
.gender input[type=radio]:checked + label {
border-color: blue;
}
<div class="form-section gender">
<div class="label-col">
<label>Gender</label>
</div>
<div class="form-section">
<input type="radio" name="gender" id="male" value="male" />
<label for="male"><span>Male</span>
</label>
</div>
<div class="form-section">
<input type="radio" name="gender" id="female" value="female" />
<label for="female"><span>Female</span>
</label>
</div>
</div>
I have used both ::after and ::before to construct this. Kindly check thoroughly and see if it works.
input[type="radio"] {display: none;}
input[type="radio"] + label {
display: inline-block;
padding-left: 25px;
line-height: 25px;;
position: relative;
}
input[type="radio"] + label::after {
content: " ";
display: block;
position: absolute;
width: 16px;
height: 16px;
border: 2px solid #999;
left: 0;
top: 4px;
border-radius: 100%;
}
input[type="radio"]:checked + label::before {
content: " ";
display: block;
position: absolute;
width: 8px;
height: 8px;
border: 2px solid #999;
left: 4px;
background-color: #999;
top: 8px;
border-radius: 100%;
}
<div class="form-section gender">
<div class="label-col">
<label>Gender</label>
</div>
<div class="form-section">
<input type="radio" name="gender" id="male" value="male" />
<label for="male"><span>Male</span></label>
</div>
<div class="form-section">
<input type="radio" name="gender" id="female" value="female" />
<label for="female"><span>Female</span></label>
</div>
</div>
Preview
JSBin: http://jsbin.com/bapepahequ
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.