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");
}
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
Hi there I try to make it possible that you first need to click on the element and after that it should chang the background everytime you hover over it. Important is that No JavaScript or JQuery should be used. It's not a link so :visited and href is not an option
*Pseudocode*
*if* .lst-c:active *than* .lst-c:hover {
background: blue;
border-radius: 20px 20px 0px 0px !important;
}
You can try the Checkbox Hack
http://timpietrusky.com/advanced-checkbox-hack
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
div {
background: green;
}
input[type=checkbox]:checked ~ div:hover {
background: red;
}
<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
<div>Control me</div>
Checkbox
/* Hide */
.is { display: none }
/* Is checked */
.is:checked + label .content:hover { background: blue; }
/* Not checked */
.content:hover { background: red; }
<input type="checkbox" class="is" id="clicker">
<label for="clicker">
<div class="content">Hello</div>
</label>
i have included some checkboxes within my html page so the user can check and uncheck them, i also wrote the style to highlight the checkbox borders and also the label but still nothing work.
can do with a bit of help.
<input type="checkbox" name="createartwork" id="createartwork">
<label class="label-for-check" for="createartwork">I want your Designer to create my artwork</label>
input[type=checkbox]:checked + label::after{
background-color: #FD6418;
}
input:checked {
height: 50px;
width: 50px;
}
<input type="checkbox" name="createartwork" id="createartwork">
<label class="label-for-check" for="createartwork">I want you to create my artwork</label>
:checked + label {
background-color: #FD6418;
font-weight: bold;
}
Try this.
You're a bit off track, you cannot style the original <input> tag, you can fake a new checkbox with your label, so using the code you provided:
HTML:
<input type="checkbox" name="createartwork" id="createartwork">
<label class="label-for-check" for="createartwork">
I want you to create my artwork</label>
CSS:
input[type=checkbox]
+ label::before {
content: '';
width: 5px;
height: 5px;
background-color: #FF0;
margin-right: 5px;
padding: 0px 5px;
}
input[type=checkbox]:checked + label::before{
content: 'x';
background-color: #FF0;
margin-right: 5px;
padding: 0px 5px;
}
input[type=checkbox] {
display: none;
}
And of course, a working example
Well, I can change the size of "Radio" using CSS but I cant quit the border and change the background color.
Here is my code:
<input type="radio" class="textColoPgE1" id="textColoPgE" name="textColoPgE" value="col1">
And the CSS:
.textColoPgE1
{
background-color: blue;
width: 20px;
height: 20px;
border: none;
}
How to personalize my "Radio" buttons? I hope you have a solution.
Thank you
You need to make a fake radio button and hide the (browser) default one to make it work. See the example below. First it's a blue button, but after it's been clicked (and checked), it's red.
The label:before will be the container where your fake radio button will show up.
/* Hide the radio button */
input[type=radio] {
display: none;
}
/* We style the label */
.textColoPgE1-label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
}
.textColoPgE1-label:before {
content: "";
display: block;
width: 20px;
height: 20px;
top: 0;
position: absolute;
background-color: blue;
left: 0;
border-radius: 50%;
}
/* We style the checked item */
.textColoPgE1:checked + .textColoPgE1-label:before {
background-color: red;
}
<input type="radio" class="textColoPgE1" id="textColoPgE" name="textColoPgE" value="col1">
<label for="textColoPgE" class="textColoPgE1-label">Radio button</label>
You have here a great example of what you need to do to make your own radio button style:
http: //codepen.io/mitchmc/pen/pebIx
Basically, you need to turn of the button and style the label.
I searched for solutions for the same issue and found this very clear and helpful explanation: http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
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: