I was looking for a pure CSS based checkbox solution and came across following codepen code -
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*** basic styles ***/
body { margin: 30px; }
h1 { font-size: 1.5em; }
label { font-size: 24px; }
div {
width: 175px;
margin-left: 20px;
}
/*** custom checkboxes ***/
input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
}
input[type=checkbox] + label:before { content: "\f096";
letter-spacing: 10px;
} /* unchecked icon */
input[type=checkbox]:checked + label:before { content: "\f046";
letter-spacing: 5px;
} /* checked icon */
Issue is that I cannot check/uncheck, click event on checkbox does not change the checkbox styles. In styles it hides the checkbox (display set to none), how does check event work in this?
When I set the checkbox display to block and check/uncheck it changes styles.
You don't check/un-check by clicking on the checkbox, you do it by clicking on the label in this case. In CSS/HTML, the label is basically an extension of whatever input it's linked to. So as far as your browser is concerned, clicking the label (your icon) is the same thing as toggling the checkbox.
See here for more information about labels
its a piece scss code that work for mine:
label{
margin-bottom:0;
position:relative;
&:before {
content: '\f096 ';
font-family: FontAwesome;
font-size: 16px;
margin-right: 5px;
color: #303030;
}
}
input:checked + label{
&:before {
content: '\f046 ';
}
}
Related
I am trying to change the icon permanently from "add" to "done" after I click the icon. If I click the icon again, it should change from "done" to "add."
I am wondering if it is possible to do this with CSS without using Javascript.
.material-icons::before {
content: "add";
}
section:active .material-icons::before {
/*background-color: red;*/
content: "done";
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans" rel="stylesheet">
<section>
<span id="btn1" class="material-icons"></span>
</section>
Here's the simplest CSS checkbox hack solution, you can start from here:
/* The hack */
input[type=checkbox] {
display:none;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
cursor: pointer;
}
/* Default State */
input[type=checkbox] + section .material-icons::before {
content:"add";
}
/* Toggled State */
input[type=checkbox]:checked + section .material-icons::before {
content:"done";
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans"
rel="stylesheet">
<label>Click Me
<input type="checkbox">
<section>
<span id="btn1" class="material-icons"></span>
</section>
</label>
The way this works, is there are two <span>'s, (one with the add and one with the done icon) and a checkbox all stacked on top of each other, an the done icon is hidden. The add icon is pointer-events: none;, and when you click on it the checkbox gets checked. Then the add icon gets hidden, and the done icon gets shown.
(Only works if you click directly on the text)
.done,
.add, .done {
position: absolute;
top: 0;
left: 0;
background-color: white;
}
.done { display: none; }
.add { display: inline-block; pointer-events: none; }
label {
display: inline-block;
cursor: pointer;
position: relative;
}
input[type=checkbox] { position: absolute; top: 0; left: 0; }
input[type=checkbox]:checked~.done { display: inline-block; }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans" rel="stylesheet">
<input type="checkbox">
<div class="add">
<span id="btn1" class="material-icons first">add</span>
</div>
<div class="done">
<span id="btn1" class="material-icons">done</span>
</div>
Using your own html/css stuff:
Let me know if this helped you.
.material-icons.md1::before{
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 33px;
content:"add";
}
.btnwrap:hover .material-icons.md1::before{
content:"done";
}
Codepen
Using only CSS, I'm trying to set a list of links to have a exclamation mark next to them if they are 'unvisited' links, and a check box next to them if they have been visited. The former works fine, but when the links have been visited, the tick box doesn't appear. My CSS is as follows:
.journey-table td a:link:before {
content: "\f071";
font-family: FontAwesome;
padding-right: 5px;
}
.journey-table td a:visited:before {
content: "\f14a";
font-family: FontAwesome;
padding-right: 5px;
}
Any help would be greatly appreciated.
According to this page, the styling of a :visited element, has been made very limited, for privacy reasons. Because of this, any child elements or pseudo elements of a visited link will be styled like an unvisited link.
I've created an example for you to understand
a:before {
background-color: blue;
content: "";
display: block;
height: 25px;
width: 25px;
float: left;
margin-right: 10px;
}
a:hover:before {
background-color: red;
}
this is a link
I have this piece of code:
label.control-label{
font-weight: bold;
}
label.control-label::after{
content: ":";
}
Which makes Bootswatch Paper's labels for input bold and adds : after label, and it works very well. Then I found a way to create floating label: Paper description and example of floating labels and, to prevent behavior change in other forms, I add class .floating-labels to one of form and created this CSS:
/* Based on Ryan Walters solution http://jsfiddle.net/RyanWalters/z9ymd852/
*/
/* --- material floating label --- */
form.floating-labels .form-group {
display: flex;
height: 55px;
}
form.floating-labels .control-label {
font-size: 16px;
font-weight: 400;
opacity: 0.4;
pointer-events: none;
position: absolute;
transform: translate3d(0, 22px, 0) scale(1);
transform-origin: left top;
transition: 240ms;
}
form.floating-labels .form-group.focused .control-label {
opacity: 1;
transform: scale(0.75);
}
form.floating-labels .form-control {
align-self: flex-end;
}
form.floating-labels .form-control::-webkit-input-placeholder {
color: transparent;
transition: 240ms;
}
form.floating-labels .form-control:focus::-webkit-input-placeholder {
transition: none;
}
form.floating-labels .form-group.focused .form-control::-webkit-input-placeholder {
color: #bbb;
}
And it also works and doens't make mess with forms without .floating-labels class, except one mistake - : is also added to floating labels, which looks a little bit weird. So i want to create CSS selector which takes all label.control-label whithout these allocated in form with class.floating-labels. I created this CSS, but solution is not working:
label.control-label:not(form.floating-labels label.control-label){
font-weight: bold;
}
label.control-label:not(form.floating-labels label.control-label)::after {
content: ":";
}
I will be very happy if anybody helps me to achieve CSS selector, which will take all label.control-label except these inside form with class .floating-labels - thank you in advance.
Code snippet:
label.control-label:not(form.floating-labels label.control-label){
font-weight: bold;
}
label.control-label:not(form.floating-labels label.control-label)::after{
content: ":";
}
<form>
<label class='control-label'>Should has ':' and be bold</label>
<input>
</form>
<form class='floating-labels'>
<label class='control-label'>Should NOT be bold</label>
<input>
</form>
Solution, based on #Diego López's answer:
form:not(.floating-labels) label.control-label{
font-weight: bold;
}
form:not(.floating-labels) label.control-label::after{
content: ":";
}
Try the > selector for with the :not() you are already using
form:not(.floating-labels) > label.control-label{
font-weight: bold;
}
form:not(.floating-labels) > label.control-label::after{
content: ":";
}
You need to use the following CSS to do it.
form.floating-labels label.control-label {
font-weight: normal;
}
form.floating-labels label.control-label::after {
content:"";
}
Here below is a working snippet.
label.control-label {
font-weight: bold;
}
label.control-label::after {
content: ":";
}
form.floating-labels label.control-label {
font-weight: normal;
}
form.floating-labels label.control-label::after {
content: "";
}
<form>
<label class='control-label'>Should has ':' and be bold</label>
<input>
</form>
<form class='floating-labels'>
<label class='control-label'>Should NOT be bold</label>
<input>
</form>
As a relative newbie to CSS and HTML5, I have been using a CSS file that I found at Bootstrap checkbox replacement to display font awesome checkboxes and radio buttons. It works fine in Chrome but not in Internet Explorer even though the W3C validator shows it as valid.
Does anyone have any ideas what is wrong?
/* CSS used here will be applied after bootstrap.css */
.demo {
padding:50px;
}
.demo label{
top:3px; left:15px;
margin-right:30px;
position:relative;
}
input.faChkRnd, input.faChkSqr {
visibility: hidden;
}
input.faChkRnd:checked:after, input.faChkRnd:after,
input.faChkSqr:checked:after, input.faChkSqr:after {
visibility: visible;
font-family: FontAwesome;
font-size:25px;height: 17px; width: 17px;
position: relative;
top: -3px;
left: 0px;
background-color:#FFF;
display: inline-block;
}
input.faChkRnd:checked:after {
content: '\f058';
}
input.faChkRnd:after {
content: '\f10c';
}
input.faChkSqr:checked:after {
content: '\f14a';
}
input.faChkSqr:after {
content: '\f096';
}
Edited
So just to clarify, if you open up http://www.bootply.com/H289A4AIGZ# in Chrome the checkboxes display correctly but when you open it up in IE11 they do not appear at all - regardless of the valid CSS.
I've fought this before, and if I remember correctly, IE hides the :before pseudo element along with the checkbox, or just doesn't support :before on checkboxes.
The best I have done is here: http://jsfiddle.net/rally25rs/MRa2H/
The 3rd (black colored) checkbox works in IE but the other 2 don't.
It works by using the sibling selector to decide which icon to show.
.works-in-ie input[type="checkbox"]:checked ~ .checked
{
display: inline-block;
}
.works-in-ie input[type="checkbox"]:checked ~ .unchecked
{
display: none;
}
.works-in-ie input[type="checkbox"] ~ .checked
{
display: none;
}
.works-in-ie input[type="checkbox"] ~ .unchecked
{
display: inline-block;
}
.works-in-ie input[type="checkbox"] {
display: none;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="works-in-ie">
<label><input type="checkbox"/><i class="fa fa-arrow-down unchecked"></i><i class="fa fa-arrow-up checked"></i> Click Me</label>
</div>
Here is a screenshot of this answer and the code snippet working in IE11:
I would like to show checkbox as toggle button. But I can't apply my custom pictures to it with CCS -- still checkbox is drawn. How to accomlish this task?
My CSS:
input[type=checkbox]#settingsbutton {
border-style: none;
background-color: transparent;
width: 42px;
height: 40px;
display: block;
}
input[type=checkbox].button-settings {
background-image: url("images/button-settings-normal.png");
}
input[type=checkbox].button-settings:active {
background-image: url("images/button-settings-normal.png");
}
input[type=checkbox].button-settings:hover {
background-image: url("images/button-settings-hover.png");
}
input[type=checkbox].button-settings:active {
background-image: url("images/button-settings-pressed.png");
}
My HTML:
<body>
<input type="checkbox" id="settingsbutton" class="button-settings"/>
</body>
If you want it's with pure css solution then you have to add label in your markup . It's a trick & write lke this:
input[type=checkbox]{
display:none;
}
input[type=checkbox] + label{
height: 40px;
width: 42px;
}
body:not(#foo) input[type=checkbox]:checked + label{
background-image: url("images/button-settings-normal.png");
}
body:not(#foo) input[type=checkbox] + label{
background-position:0 -46px; /* as per your requirement*/
height: 40px;
}
HTML
<body>
<input type="checkbox" id="settingsbutton" class="button-settings"/>
<label for="settingsbutton"></label>
</body>
Read these articles :
http://www.thecssninja.com/css/custom-inputs-using-css
http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/
But it's not work in IE8 & below
See this link for styling check-boxes: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
The solution involves hiding the check-box and adding a styled element in place of it, which emulates the check-box's behavior.
Try this solution if you have some text in label
input[type=checkbox]{
display:none;
}
input[type=checkbox] + label:before{
height: 42px;
width: 42px;
content: url("../img/chk.jpg");
}
body input[type=checkbox]:checked + label:before{
content: url("../img/chk_checked.jpg");
}