I'm working on an Arduino-based system where LEDs will be turned on/off using web server (with ESP8266). I want to add a toggle switch in the HTML page so that LED will be on/off using this slide button.
What I have done so far is the toggle switch is created in HTML and added some CSS that I found on the web. Now as you can see in the code attached, 'id' is defined for the button.
Now, this id is sent to the Arduino when I click to the button and used to turn the LED on/off.
For example, if 'id'="111" is sent, LED is ON and if 'id'="110", LED is OFF.
So the problem is; whenever I click the switch, the same id(111) is sent to the server since the id of the switch is hard coded. Therefore I can not turn off the LED.
All in all, how can I set the id="110" when I click again the switch to turn it off? So LED will be off too. Please let me know your suggestions to make the system more dynamic, and how should I continue.
I thought about setting p = p -1 when the button is turned off, but I lost my way.
Thanks,
$(document).ready(function(){
$('.switch').click(function(){
var p = $(this).attr('id');
$.get("IPADDRESS", { pin: p });
$(this).toggleClass("switchOn" );
});
});
.wrapper{
width:500px;
margin:0 auto;
}
.switch{
width:200px;
height:100px;
background:#E5E5E5;
z-index:0;
margin:0;
padding:0;
appearance:none;
border:none;
cursor:pointer;
position:relative;
border-radius:100px;
}
.switch:before{
content: ' ';
position:absolute;
left:5px;
top:5px;
width:190px;
height:90px;
background:#ffffff;
z-index:1;
border-radius:95px;
}
.switch:after{
content:' ';
width:88px;
height:88px;
border-radius:86px;
z-index:2;
background:#FFFFFF;
position:absolute;
transition-duration:500ms;
top:6px;
left:6px;
box-shadow:0 2px 5px #999999;
}
.switchOn, .switchOn:before{
background:#4cd964; !important;
}
.switchOn:after{
left:105px;
}
<head>
<title>Smart Home System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<label>
<div id="111" class="switch">
</label>
</body>
Welcome to Stack Overflow. Consider the following.
$(function() {
$('.switch').click(function() {
$(this).toggleClass("switchOn");
var myData = {
pin: $(this).attr("id"),
on: $(this).hasClass("switchOn") ? true : false
};
console.log("Setting Pin " + myData.pin + " High, " + myData.on);
$.get("IPADDRESS", myData);
});
});
.wrapper {
width: 500px;
margin: 0 auto;
}
.switch {
width: 200px;
height: 100px;
background: #E5E5E5;
z-index: 0;
margin: 0;
padding: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius: 100px;
}
.switch:before {
content: ' ';
position: absolute;
left: 5px;
top: 5px;
width: 190px;
height: 90px;
background: #ffffff;
z-index: 1;
border-radius: 95px;
}
.switch:after {
content: ' ';
width: 88px;
height: 88px;
border-radius: 86px;
z-index: 2;
background: #FFFFFF;
position: absolute;
transition-duration: 500ms;
top: 6px;
left: 6px;
box-shadow: 0 2px 5px #999999;
}
.switchOn,
.switchOn:before {
background: #4cd964;
!important;
}
.switchOn:after {
left: 105px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><div id="110" class="switch"></div></label>
<label><div id="111" class="switch"></div></label>
<label><div id="112" class="switch"></div></label>
I found no major issues in your code. Consider the logic of sending the Pin and Status last, so that you can gather the status of your switch after it's been toggled.
Update
The following does what you originally requested.
$(function() {
$('.switch').click(function() {
$(this).toggleClass("switchOn");
var i = $(this).attr("id").substr(0,2);
var s = $(this).attr("id").substr(2) == 1 ? "0" : "1";
var p = i + s;
var myData = {
pin: p
};
console.log("Setting Pin " + p);
$.get("IPADDRESS", myData);
$(this).attr("id", p);
});
});
.wrapper {
width: 500px;
margin: 0 auto;
}
.switch {
width: 200px;
height: 100px;
background: #E5E5E5;
z-index: 0;
margin: 0;
padding: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius: 100px;
}
.switch:before {
content: ' ';
position: absolute;
left: 5px;
top: 5px;
width: 190px;
height: 90px;
background: #ffffff;
z-index: 1;
border-radius: 95px;
}
.switch:after {
content: ' ';
width: 88px;
height: 88px;
border-radius: 86px;
z-index: 2;
background: #FFFFFF;
position: absolute;
transition-duration: 500ms;
top: 6px;
left: 6px;
box-shadow: 0 2px 5px #999999;
}
.switchOn,
.switchOn:before {
background: #4cd964;
!important;
}
.switchOn:after {
left: 105px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><div id="101" class="switch switchOn"></div></label>
<label><div id="111" class="switch switchOn"></div></label>
<label><div id="121" class="switch switchOn"></div></label>
The ID is changed from 111 to 110 and back on each click. Per your comment, this will be Pin 11 and Status 1 or Status 0.
Some items, like .attr() and .data() are both a Getter and a Setter all in one. It depends on what you use as parameters.
$(this).attr("id")
This will Get the ID.
$(this).attr("id", "111");
This will Set the ID.
See more: https://api.jquery.com/attr/
Related
[![How to restrict the autocomplete div tags height without affecting the bottom fields.
Here when i'm searching for country references dropdown is showing, but the entire height is increasing.
here the dropdown is fall over the communication field. How to achieve this. Please find the PIC for better understanding Thanks.`
Country Reference
<div class="form-group right">
<label for="Communication_Type" class="label-title">Communication Type</label>
<div class="autocomplete1">
<input type="text" class="" id="empid1" name="empid1">
<div class="dialog1">
<ul id="charactersList1"></ul>
</div>
</div>
</div>
.cref_container {
background-color: yellow;
}
.label_cref {
display: inline-block;
margin-left: 25px;
padding: 5px;
width: 30%;
margin-top: 2px;
background-color: royalblue;
}
.autocomplete {
/* background: #fff; */
position: relative;
}
.autocomplete .close {
position: absolute;
font-size: 13px;
z-index: 10;
top: 10px;
left: calc(100% - 50px);
color: #aaa;
cursor: pointer;
display: none;
}
.autocomplete .close.visible {
display: block;
}
.dialog {
width: 60%;
margin-left: 40%;
display: none;
min-height: 40px;
max-height: 330px;
overflow: scroll;
border-top: 1px solid #f4f4f4;
}
.dialog.open {
display: block;
}
.dialog div {
padding: 20px 10px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.dialog div:hover {
background: #f2f2f2;
}`]1]1
You have two options:
either use a native "select" input component which already does that (see https://www.w3schools.com/tags/tag_select.asp)
set your "dialog1"'s position to "fixed" and set its "left" and "top" from javascript. "fixed" position takes it out of the normal layout and doesn't push around any other elements.
const leftCoordinate = 20;
const topCoordinate = 100;
document.getElementsByClassName("dialog1")[0].style.left = leftCoordinate;
document.getElementsByClassName("dialog1")[0].style.top = topCoordinate;
.dialog1 {
position: fixed;
}
In my web application initially showing Image with overlapping the video when the user click on it the form will show up after submitting the form storing the value in cookie for One day. If cookie have value the YouTube video will show. So that user can watch this is the functionality we have.
The functionality are working but the video are not showing if cookies have value. For this I tried below code.
Here I have submitting the code If cookie have value replacing the YouTube video. It's not working for me. Please suggest us where I went wrong.
<html>
<head>
<title>Set Cookies</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style type="text/css">
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: -60px;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #f7f7f7;
margin: auto;
padding: 20px;
border: 1px solid #888;
max-width: 340px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal{
padding-left: 35px;
padding-right: 35px;
}
#contactform input,select {
height: 40px;
border: 1px solid #C6C6C6;
color: #000;
margin: 5px 0 0;
}
.errorMessage{
color: #d13800;
font-size: 12px;
display: none;
}
.customButton{
background-color: #0095eb !important;
color: #fff !important;
}
</style>
<style type="text/css">
.youTypeLink{
display: none;
}
.thumb {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.thumb li {
width: 193px;
}
.thumb li ~ li {
margin-left: 20px;
}
.thumb .thumbCaption {
padding: 10px 0;
}
.overlay {
position: relative;
}
.overlay .thumbnail {
display: block;
}
.overlay .time {
position: absolute; z-index: 2;
right: 3px; bottom: 3px;
padding: 2px 5px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
.overlay .playWrapper {
opacity: 0;
position: absolute; z-index: 1;
top: 0;
width: 192px; height: 109px;
background: rgba(0,0,0,0.6) url("http://wptf.com/wp-content/uploads/2014/05/play-button.png") no-repeat scroll center center / 50px 50px;
}
.playWrapper .playBtn {
position: absolute;
z-index: 2;
width: 50px;
height: 50px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto; /* center */
}
.thumb .overlay:hover .playWrapper {
opacity: 1;
}
</style>
<script>
function setCookie(cname,cvalue,exdays) {
let d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
let user = getCookie("username");
if (user !== "") {
$('#youTubeImage').css({"display":"none !important"});
$('#youTypeLink').css({"display":"initial !important"});
/* player = new YT.Player('player', {
width : '320',
height : '180',
videoId : 'qlEUrEVqDbo',
playerVars: { 'autoplay': 1 },
events : {
'onReady' : onPlayerReady,
'onStateChange' : onPlayerStateChange
}
});*/
console.log(user);
setCookie("username", "cookiesValue", 1);
}else{
$('#youTubeImage').css({"display":"initial"});
$('#youTypeLink').css({"display":"none"});
}
</script>
</head>
<body>
<div>
<ul id="youTubeImage" class="thumb">
<li>
<div class="overlay">
<img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt="">
<span class="time">3:28</span>
<a href="#" class="playWrapper" id="myBtn">
<!--<span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>-->
</a>
</div>
<div class="thumbCaption">This is the description of the video...</div>
</li>
</ul>
<div class="youTypeLink">
<ul class="thumb">
<li>
<div class="overlay">
<iframe width="370" height="303" src="https://www.youtube.com/embed/OXmIptsCsw0">
</iframe>
</div>
<div class="thumbCaption">This is the description of the video...</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Please suggest us to work properly. If cookie have value show video or else showing image.
I have this simple form for uploading files:
<form method="post" action="">
<input id="holder" type="file" style="padding: 5px; width:100%; height:100px; border: 5px dashed #ccc">
</form>
http://jsfiddle.net/e98b2w7s/
But now I need a way to add this text in the background inside the dotted area:
"or Drag and Drop your file here"
Is there a way to do that?
You may do better to just set your styles to your form instead, in which case you can just give the form itself the background image for a bit of a cleaner solution:
Edit: Removed background image to show with text instead for a cleaner approach.
form {
padding: 5px;
width: 100%;
height: 100px;
border: 5px dashed #ccc;
}
form h1 {
text-align: center;
color: #ccc;
}
<form method="post" action="">
<input id="holder" type="file">
<h1>Drag & Drop Files Here</h1>
</form>
You don't need to use a background image, however, you could just create an h1 that says "Drag & Drop Here" and then use an SVG or FontAwesome to add the cloud and/or arrow icons.
Please try below solution
<form action="youractionfile.php" method="POST">
<input type="file" multiple>
<p>Drag your files here or click in this area.</p>
<button type="submit">Upload</button>
</form>
CSS
<style type="text/css">
body{
background: rgba(0,0,0,0.9);
}
form{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: 200px;
border: 4px dashed #fff;
}
form p{
width: 100%;
height: 100%;
text-align: center;
line-height: 170px;
color: #ffffff;
font-family: Arial;
}
form input{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
form button{
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-top: -20px;
margin-left: -4px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form button:hover{
background: #149174;
color: #0C5645;
}
form button:active{
border:0;
}
</style>
below javascript code
$(document).ready(function(){
$('form input').change(function () {
$('form p').text(this.files.length + " file(s) selected");
});
});
As you mentioned a question here I'm posting my answer
$(function () {
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
var inputFile = dropZone.find("input");
document.getElementById(dropZoneId).addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({ top: y - 15, left: x - 100 });
} else {
inputFile.offset({ top: -400, left: -400 });
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function (e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({ top: y - 15, left: x - 160 });
} else {
inputFile.offset({ top: -400, left: -400 });
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function (e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
})
#drop-zone {
/*Sort of important*/
width: 300px;
/*Sort of important*/
height: 200px;
position:absolute;
left:50%;
top:100px;
margin-left:-150px;
border: 2px dashed rgba(0,0,0,.3);
border-radius: 20px;
font-family: Arial;
text-align: center;
position: relative;
line-height: 180px;
font-size: 20px;
color: rgba(0,0,0,.3);
}
#drop-zone input {
/*Important*/
position: absolute;
/*Important*/
cursor: pointer;
left: 0px;
top: 0px;
/*Important This is only comment out for demonstration purposes.
opacity:0; */
}
/*Important*/
#drop-zone.mouse-over {
border: 2px dashed rgba(0,0,0,.5);
color: rgba(0,0,0,.5);
}
/*If you dont want the button*/
#clickHere {
position: absolute;
cursor: pointer;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: 20px;
line-height: 26px;
color: white;
font-size: 12px;
width: 100px;
height: 26px;
border-radius: 4px;
background-color: #3b85c3;
}
#clickHere:hover {
background-color: #4499DD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="drop-zone">
or Drag and Drop files here
<div id="clickHere">
or click here..
<input type="file" name="file" id="file" />
</div>
</div>
Html:
<input id="holder" type="file" placeholder="or Drag and Drop your file here" />
<label for="holder"> or Drag and Drop your file here </label>
Css:
[type=file] {
position: absolute;
filter: alpha(opacity=0);
opacity: 0;
}
input,
[type=file] + label {
border: 1px solid #CCC;
border-radius: 3px;
text-align: left;
padding: 10px;
width: 150px;
margin: 0;
left: 0;
position: relative;
}
Js:
$("[type=file]").on("change", function(){
// Name of file and placeholder
var file = this.files[0].name;
var dflt = $(this).attr("placeholder");
if($(this).val()!=""){
$(this).next().text(file);
} else {
$(this).next().text(dflt);
}
});
Working example here. Hope this work
I'm trying to avoid the modern cliche of having my own custom login system for my website, and instead I'm trying to use Facebook and Twitter as options that users can have to login to my site. After several hours of browsing, I've discovered that incorporating Facebook into my website is about as easy as tying your shoes using only your teeth.
I've managed to get the button to show up inside the proper div; however, I am unable to get the button to position itself in the center of the tag that it lives in.
My first question (of probably many) on this journey, is how can I center the button? I've tried adding a style tag to the div, and that of course didn't work since Facebook actually replaces my div. Thank you for any help you can provide.
Edit: Adding in relevant code.
Index.php:
<!--User System Start -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[MASKED]', // App ID
channelUrl : '[MASKED]', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="loginWrapper">
<div id="loginBar">
<section id="loginBarLeft">
<h1>Step One: Login</h1>
<div id="fb-root"></div>
<div class="centered"><fb:login-button>Login With Facebook</fb:login-button></div>
</section>
<section id="loginBarCenter">Login Bar Center</section>
<section id="loginBarRight">Login Bar Right</section>
</div>
<div id="showHide">Login or Register</div>
</div>
<!--User System End -->
userSystem.css
#charset "utf-8";
/* CSS Document */
body {
margin-top: 0;
padding-top: 0;
}
div#loginWrapper {
width: 1024px;
height: auto;
margin: 0 auto;
position: fixed;
z-index: 2;
left: 50%;
left: 120px;
top: 0
}
div#loginBar {
width: 1024px;
height: 300px;
background: url(images/loginBar_background.png) repeat-x;
color: #006;
border-bottom-left-radius: 25px;
box-shadow: 5px 5px 5px #000;
}
div#loginBar section#loginBarLeft {
float: left;
width: 33%;
height: 300px;
}
div#loginBar section#loginBarLeft h1 {
text-align: center;
margin-top: 5px;
}
div#loginBar section#loginBarLeft .centered {
height: 100px;
width: 341px;
margin: 0 auto;
}
div#loginBar section#loginBarCenter {
float: left;
width: 33%;
height: 300px;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
}
div#loginBar section#loginBarRight {
float: left;
width: 33%;
height: 300px;
}
div#showHide {
width: 200px;
height: 25px;
position: relative;
left: 824px;
background: #333;
color: #FFF;
text-align: center;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
box-shadow: 5px 5px 5px #000;
z-index: 2;
}
div#showHide a {
color: #CCC;
text-decoration: none;
font-weight: bold;
}
div#showHide a:hover {
color: #FFF;
}
I've managed to position the fb like button before:
It shouldn't replace your div if your login button is setup similar e.g. use XFBML.
HTML
<p>Click on <span class="fb-like"><fb:like href="http://www.facebook.com/somepage" send="false" width="49" show_faces="false" font="arial"></fb:like></span> to become fan and enter lalalalala some form.</p>
CSS
.fb-like { display: inline-block; height: 28px; overflow: hidden; position: relative; top: 6px; width: 48px; }
for your specific problem you may want to try something like this:
HTML
<div class="table">
<div class="centered"><fb:login-button show-faces="false" width="200" max-rows="1"></fb:login-button></div>
</div>
CSS
.centered { display: table-cell; vertical-align: middle; }
.table { display: table; height: 400px; }
I am trying to change the default 'box image' of the checkbox with CSS, but it is not working. Is there any way around this?
.class_checkbox{
background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}
<input type="checkbox" class="class_checkbox">
You can use pure css, just add a label to the checkbox like this:
.check_box {
display:none;
}
.check_box + label{
background:url('images/check-box.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
.check_box:checked + label{
background:url('images/check-box-checked.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
Example HTML:
.check_box {
display:none;
}
.check_box + label{
background:url('images/check-box.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
.check_box:checked + label{
background:url('images/check-box-checked.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
<input type="checkbox" class="check_box" id="checkbox1">
<label for="checkbox1">
Try:
<input type="checkbox" class="input_class_checkbox">
jQuery
$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');
});
$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});
Fiddle:
http://jsfiddle.net/cn6kn/
$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');
});
$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});
.class_checkbox {
width: 20px;
height: 20px;
background-color: red;
}
.class_checkbox.checked {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="input_class_checkbox">
I created a Fiddle using pure CSS.
The most voted answer doesn't handle click events and won't work well, because the checkbox value won't change.
This is my example:
http://jsfiddle.net/kEHGN/1/
Basically, we need the following html:
<div class="checkbox_wrapper">
<input type="checkbox" />
<label></label>
</div>
And the following CSS:
.checkbox_wrapper{
position: relative;
height: 16px;
width: 17px;
}
input[type="checkbox"] {
opacity:0;
height: 16px;
width: 17px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
input[type="checkbox"] + label{
background:url('../images/unchecked.png') no-repeat;
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
input[type="checkbox"]:checked + label{
background:url('../images/checked.png') no-repeat;
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
}
Just check the routes of the images, and the widths and heights should be equal to the width and height of the images.
On the fiddler I am using base64 encoded images.
I hope it can be useful.
I found another way, without using adjacent labels or surrounding divs.
My usecase was that I had a markdown parser that generates those nifty TODO lists and I wanted to style them. Changing the generated HTML wasn't a option, so I came up with this solution:
given a checkbox like this:
<input type="checkbox" id="cb">
You can style it with visibility: hidden on checkbox and visibility: visible on ::after, like this:
#cb {
visibility: hidden;
}
input#cb::after {
visibility: visible;
content: "F";
color: red;
background: green;
padding: 8px;
}
input#cb:checked::after {
content: " T ";
color: green;
background: red;
}
<!doctype html>
<html>
<body>
<input type="checkbox" id="cb">
</body>
</html>
EDIT:
#connexo in a comment pointed out that input elements cannot have content. It could be easly done using label element, for example like so (please someone correct me if this is wrong, I don't have non-webkit browser handy to test it).
#cb-span * {
visibility: hidden;
}
input#cb + label::after {
visibility: visible;
content: "F";
color: red;
background: green;
padding: 8px;
}
input#cb:checked + label::after {
content: " T ";
color: green;
background: red;
}
<!doctype html>
<html>
<body>
<span id="cb-span">
<input type="checkbox" id="cb">
<label for="cb"></label>
</span>
</body>
</html>
The checkbox works just like normal one and you can style it anyway you like.
Maybe it'll help someody (and I can bookmark it, because I haven't found anything like this on the web)
Maybe will be useful my sample with LESS.
<div class="custom-checkbox">
<input component="input" type="checkbox"/>
<label>Here is caption right to checkbox</label>
</div>
#imgsize: 25px;
.custom-checkbox{
position: relative;
> input[type="checkbox"] {
display:none;
position: absolute;
top: 0;
left: 0;
+ label{
background:url('../img/unchecked.png') no-repeat 0 0;
background-size:#imgsize;
height: #imgsize;
padding: 4px 0 5px 35px;
display: inline-block;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
}
> input[type="checkbox"]:checked + label{
background:url('../img/checked.png') no-repeat;
background-size:#imgsize #imgsize;
}
}