Develop Reference

Label for hidden date input not working on Chrome

I have a date input and I want it to have a placeholder, so I added a label and a display none.
I have this code:
document.querySelector("#date").onchange = (e) => {
document.querySelector("#datelabel").innerHTML = e.target.value;
}
#datelabel {
padding: 16px;
border-radius: 15px;
border: 2px solid rgba(0, 0, 0, 0.8);
outline: none;
font-size: 20px;
transition: .2s;
width: 200px;
display: block;
}
<input type="date" name="date" id="date" style="display:none;">
<label class="input" for="date" style="color:var(--text);" id="datelabel">Date</label>
It works fine on Firefox, but not on Chrome.
If I remove the display of none of the input, it works, but I don't want the real input to be visible.
I tried to set a height and width to 0, an overflow: hidden, to remove the paddings and margins, but it created a mess in the display of my page, so I want to keep the display of none and find another solution.
Edit:
I hid it another way:
position: absolute;
visibility: hidden;
It works now.

Try this, it works
input {
padding: 16px;
border-radius: 15px;
border: 2px solid rgba(0, 0, 0, 0.8);
outline: none;
font-size: 20px;
transition: .2s;
width: 200px;
display: block;
}
::placeholder {
color:black;
font-size: 25px;
}
<input type="text" name="date" id="date" id="datelabel" style="display:block;" placeholder="Date">

get value of a checked bootstrap checkbox

I have this HTML form:
<div class="animated-switch">
<input id="switch-success" name="switch-success" checked="" type="checkbox">
<label for="switch-success" class="label-success"></label>
</div>
How i can know if the input is checked or not ?
I tried like this but nothing alerted:
$(document).on('click','.animated-switch',function(e){
alert($('#switch-success:checked').val() );
});
Here a JSFIDDLE file in order to see my clear example: https://jsfiddle.net/s2f9q3fv/

Your code works fine in the snippet. You have forgotten to add value to your checkbox, but even without it you should be able to see the alert message with undefined value (see below the value 'test' was added in the snippet).
$(document).on('click','#switch-success:checked',function(e){
alert($('#switch-success:checked').val() );
});
.animated-switch > input[type="checkbox"] {
display: none; }
.animated-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px; }
.animated-switch > label::before {
background: black;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position: absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px; }
.animated-switch > label::after {
background: white;
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px; }
.animated-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5; }
.animated-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="animated-switch">
<input id="switch-success" name="switch-success" checked="" value="test" type="checkbox">
<label for="switch-success" class="label-success"></label>
</div>
UPDATE:
You should bind the click event on the checkbox itself, not the parent. Try the snipped again with the fancy animation.
Notice if you want the alert always to be executed you have to remove the :checked attribute in the selector.

Try this
$(".animated-switch").change(function () {
alert($('#switch-success:checked').val() );
});

I still had problems and came up with a workaround:
<input class="form-check-input" type="checkbox" id="inlineCheckbox1"
onclick="document.getElementById('inlineCheckbox1').setAttribute('value',
document.getElementById('inlineCheckbox1').value * -1)" value='-1'>
<label class="form-check-label" for="inlineCheckbox1">1</label>
I set a 'onclick' event and I set a 'value' attribute to -1. When you click on the checkbox or the label, 'value' will change its sign. So when you want to get the value, grab the 'value' attribute and check if it's greater or less than zero.

Expanding Search Off Click Close JQuery

I made an expanding JQuery Search Box yesterday, which works like a charm! But, I am having trouble creating a script that makes it so when the user clicks off the search box, it closes.
This is my JQuery:
function expandSearch(){
$('#search-input').toggleClass('search-input-open');
}
This is my HTML:
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span onclick="expandSearch()" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>
And my CSS:
.ngen-search{
padding:0px 0px 0px;
}
.form-search-input{
width:0px;
height:55px;
border: 0;
outline: 0;
font-size:21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open{
width:410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit{
display:inline-block;
width:55px;
height:43px;
border: 0;
outline: 0;
background-color:#151515;
font-size:21px;
color: white;
cursor: pointer;
text-align:center;
}
All help is appreciated! Thanks!
Also, please note that I am quite new to JQuery and rarely use it.

You can write a click handler which listens to the click on anywhere in the page and then remove the class like
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
})
.ngen-search {
padding: 0px 0px 0px;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: white;
cursor: pointer;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span id="search-trigger" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>

How do I make a <span> element a regular tab stop within a form?

I made a form control which uses as its container (see the Yes/No toggler below)
Here's the code for that:
<span class="toggle">
<i>Yes</i>
<i>No</i>
<input type="hidden" name="toggle-value" value="0">
</span>
My CSS isn't relevant to the question, but it's included for comprehension of my control:
.toggle { width:auto; height: 20px; display: inline-block; position: relative; cursor: pointer; vertical-align: middle; padding: 0; margin-right: 27px; color: white !important;}
.toggle i { display: block; padding: 0 12px; width: 100%; height: 100%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font: 11px/20px Arial !important; text-transform: uppercase; }
.toggle i:first-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #73B9FF; }
.toggle i:last-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #cc0000; position: relative; top: -20px; z-index: -1; }
.toggle.on i:first-child { z-index: 1; } /* they overlap but on click they switch who gets to be on top. */
.toggle.on i:last-child { z-index: -1; }
.toggle.off i:first-child { z-index: -1; }
.toggle.off i:last-child { z-index: 1; }
.toggle.off i:last-child:before { content: " "; display:block; position:absolute; left:1px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1; background-color: #fff; } /* circle */
.toggle.on i:first-child:after { content: " "; display:block; position:absolute; right:-23px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1; background-color: #fff; } /* circle */
and the JS that makes it all work:
.on('click', '.toggle', function(){
var input = $(this).next('input');
if(input.val() == 1) {
$(this).removeClass('on').addClass('off');
input.val(0).change();
} else {
$(this).removeClass('off').addClass('on');
input.val(1).change();
}
}
The problem is that I'm using this all over my application for data-entry. Have you ever wanted to NOT use the mouse when you're entering a lot of data? Yeah, me too. So you hit TAB and a toggle like this should respond to the spacebar. But instead, since it's just a element, it is skipped altogether.
I'm hoping someone can help me solve the question of "how the heck do I make this a tab stop AND be in the correct order"?
==============
EDIT: HERE IS MY UPDATED JQUERY CODE CONTAINING THE SOLUTION:
$('.toggle').click(function(){
var input = $(this).next('input');
if(input.val() == 1) {
$(this).removeClass('on').addClass('off');
input.val(0).change();
} else {
$(this).removeClass('off').addClass('on');
input.val(1).change();
}
}).focus(function() {
$(this).bind('keydown', 'space', function(e){
$(this).trigger('click')
e.preventDefault();
});
}).blur(function() {
$(this).unbind('keydown');
}).attr('tabIndex', 0);

Try setting your tabindex to 0, on the non-anchor elements you would like to make "tabbable". For example tabindex="0". This way, you won't mess with the tabbing order, or have to throw tabindexs all over the place.

Look into the html attribute tabindex. Basically you should be able to set tabindex on each input you want to focusable via the tab key. Start the first one a 1 and just count upwards for each input. If you also want to take an input out of focusing via the tab key set the tabindex to -1.

How to change the color of the checkbox (tickbox) from white to black?

I want to change my checkbox color white to black and color of my tick black to white.Wnat to know is it possible ?
I tried background color and color property it is not working.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src=" http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif:700normal"/>
<title>Untitled Document</title>
<script>
function statecheck(layer) {
var myLayer = document.getElementById(layer);
if(myLayer.checked = true){
myLayer.style.color = "#bff0a1";
} else {
myLayer.style.backgroundColor = "#eee";
};
}
</script>
label {
margin:0px 2px 4px 2px;
padding: 1px;
background-color: #eee;
display: block;
width: 50px;
}
</head>
<body>
<form action="" method="get">
<label title="Alabama" id="Alabama"><input type="checkbox" value="checkbox" onchange="statecheck('Alabama')" />AL</label>
<label title="Alaska" id="Alaska"><input type="checkbox" value="checkbox" onchange="statecheck('Alaska')" />AK</label>
<label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck('AmericanSamoa')" />AS</label>
</form>
</body>
</html>

This is what i use for "styling" checkboxes : http://jsfiddle.net/D8daE/1/
HTML:
<input type="checkbox" id="check1" class="checkbox"><label for="check1"> Example</label>
Css:
input[type="checkbox"]{
margin-left: 10px;
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-left: 17px;
position: absolute;
left: 0;
bottom: 1px;
background-color: black;
border-radius: 3px;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 40px;
margin-right: 15px;
font-size: 15px;
}
.checkbox label {
margin-bottom: 10px;
}
.checkbox label:before {
border-radius: 3px;
}
input[type="checkbox"]:checked + label:before {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: white;
text-align: center;
line-height: 15px;
}
It doesn't style the checkbox itself instead it modifies the label of the checkbox.
In order to change the color of the box set the label:before background to what color you want and in order to modify the tick set the color of the "input[type="checkbox"]:checked + label:before" to whatever color you need.
Ps. It is pure css.