I am trying to find a way of changing the alert function on my script to show my div 'error' instead, can someone please show me how i may do this? thanks
HTML:
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JAVASCRIPT:
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
i have tried:
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
show("error");
return false;
}
}
error css:
.error{
width: 946px;
margin: auto;
height: 20px;
overflow: hidden;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-size:14px;
padding:20px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #000;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color:#FF9933 ;
margin-bottom:30px;
display: none
}
Working Demo
Just Add div tag in your html page like the following with the css class which you have specified.
<div id ="alertBox" class="error">
ERROR
</div>
Just Add the following line in the javascript.
document.getElementById("alertBox").style.display='block';
for jquery:
$("#error").css({ // if "error" is a class use: $(".error").css({
display:'block'
});
Related
I have a web app that takes a user input and outputs the result to the lower part of the main page. There are two pairs of form tags--a main form and a secondary form. I want the output produced by the main form to show above the secondary form.
The secondary form does not output anything. It is a button that says "Show All Folders". See screenshot. I want the result where the red arrow is pointing to.
#!C:\Python\Python38-32\python.exe
import cgi
import os
import re
print("Content-Type: text/html")
print()
input = cgi.FieldStorage()
print("""
<head>
<title> Search </title>
<script type="text/javascript">
function showHide() {
var div = document.getElementById('hidden_div');
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}
</script>
</head>
<style type="text/css">
body{
font-size: 16px;
color: #333;
font-family: 'Roboto', sans-serif;
background: #BBDEFB;
}
h1{
font-size: 30px;
background: #2196F3;
padding: 5px;
top: 0px;
width: 99%;
height: 50px;
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
border-radius: 12px;
color: #E3F2FD;
}
#mainForm form{
background: #E3F2FD;
padding: 25px;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
border-radius: 5px;
}
#secondaryForm form{
background: #E3F2FD;
padding: 5px;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
border-radius: 5px;
}
.result_1{
font-size: 15px;
color: #333;
padding: 10px;
background: #cccccc;
border-radius: 1px;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
}
.result_2{
font-size: 13px;
color: #333;
padding: 2px;
background: #f2f2f2;
border-radius: 1px;
}
input[type=text]{
background-color: #42A5F5;
color: #E3F2FD;
border: none;
font-weight: bold;
font-size: 14px;
padding: 8px 20px 8px 12px;
margin: 8px 0;
height: px;
border-radius: 8px;
}
input[type=submit]{
background-color: #42A5F5;
padding: 8px 20px;
border: none;
font-weight: bold;
font-size: 14px;
color: #fff;
box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
}
div.a {
text-align: right;
}
</style>
""")
print("""<body>
<h1><center>SEARCH FILES</center></h1>
<div id="mainForm">
<form action="search_sample.py">
Enter Value to Search<br>
<input type="text" name="user_input"><br>
<br>
Select File Type<br>
<input type="radio" name="operator" value="o_file" checked> O File <br>
<input type="radio" name="operator" value="l_file"> L File <br>
<br>
<input type="submit" value="Submit"><br>
</form>
</div>
<div id="secondaryForm">
<form name="showfolders" onsubmit="showHide(); return false;">
<input type="submit" value="Show All Folders" name="show_folder" />
</form>
</div>
""")
# Begin Python script
my_dir = "C:/Users/xstah/OneDrive/Documents/sample_txt/"
# Get all folders
print('<div id="hidden_div" style="display:none">')
for root, dirs, files in os.walk(my_dir):
for file in files:
if file.endswith(".dat"):
filename2 = os.path.join(root, file)
filepath_split = os.path.normpath(filename2)
path_list = filepath_split.split(os.sep)
hostname = path_list[6]
foldername = path_list[7]
print('<div class="result_1">{}</div>'.format('<b>'+ hostname + '</b>'))
print('<div class="result_2">{}</div>'.format(foldername))
print('</div>')
# User input & selection
user_input = input["user_input"].value
operation = input["operator"].value
# End Python script
print("</body>")
Try to make div between main and secondary forms there and do innerHTML or innerText by js.
This is my cshtml file and I'm using typeahead in script to load and autocomplete my text-box while entering the customer name.
I can see that while typing the name in customer textbox there is a call to my API but nothing is getting displayed as a dropdown.
<form>
<div class="form-group">
<label>Customer</label>
<input id="customer" type="text" value="" class="form-control" />
</div>
<div class="form-group">
<label>Movies</label>
<input type="text" value="" class="form-control" />
</div>
<button class="btn btn-primary">Submit</button>
</form>
#section scripts
{
<script>
$(document).ready(function () {
var customers = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/customers?query=%QUERY',
wildcard: '%QUERY'
}
});
customers.initialize();
$('#customer').typeahead({
minLength: 3,
highlight: true
},
{
name: 'customers',
display: 'name',
source: customers
});
});
</script>
}
Here is my typeahead.css file:
.typeahead {
background-color: #fff;
}
.typeahead:focus {
border: 2px solid #0097cf;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-menu {
width: 422px;
margin: 12px 0;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion:hover {
cursor: pointer;
color: #fff;
background-color: #0097cf;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
.tt-container {
position: relative;
}
and this is the typeahead js I'm using:
https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js
My API return values something like this:
[
{
"id": 1016,
"name": "John",
"isSubscribeToNewsLetter": true,
"membershipType": {
"id": 4,
"signUpFee": 300,
"durationInMonths": 12,
"discountRate": 20,
"subscriptionType": "Yearly"
},
"membershipTypeId": 4,
"birthDate": "1990-10-18T00:00:00"
}
]
Try replacing you typeahead function to below:
$('#customer').typeahead({
minLength: 3,
highlight: true
},
{
name: 'customers',
displayKey: 'name',
source: customers.ttAdapter()
});
});
I have changed "display" to "displayKey" and customers to customers.ttAdapter().
Hope it helps :)
The above code I posted is correct, but there was an issue in my API which was the root cause of this whole problem:
Previous API:
public IEnumerable<Customer> GetCustomers()
{
return _context.Customers.Include(c => c.MembershipType).ToList();
}
Current API(working fine):
public IEnumerable<Customer> GetCustomers(string query = null)
{
var customersQuery = _context.Customers
.Include(c => c.MembershipType);
if (!String.IsNullOrWhiteSpace(query))
customersQuery = customersQuery.Where(c => c.Name.Contains(query));
return customersQuery;
}
Can anyone help with a script which has stopped working:
It's a html/css form created (last year) to get the responses on a google spreadsheet alongside the the files uploaded within a folder. It was working fine until beginning of this year, but it doesn't anymore. I mean as usual, I run a function + deploy app, I get the link and the form appears, but upon submission I get nothing, blank page and the spreasheets doesn't contain anything.
Thanks a lot for your guidance.
Here are my codes:
Form.html
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<style type="text/css">
img {
display: block;
margin-left: auto;
margin-right: auto;
width:500px;
height:170px;
;
}
form {
width:450px;
padding:30px;
margin: auto;
background: #FFF;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
h2 {
width:450px;
padding:30px;
margin: auto;
margin-top: 5px;
margin-bottom: 10px;
text-align: center;
border-radius: 10px;
background: #FF8500;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
-moz-box-shadow: 1px 1px 4px #DADADA;
-webkit-box-shadow: 1px 1px 4px #DADADA;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
h1 {
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
h1 > span {
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
label {
display: block;
font: 13px Arial, Helvetica, sans-serif;
color: #888;
margin-bottom: 15px;
}
input[type="text"],
input[type="email"],
input[type="file"],
textarea,
select {
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
section{
font: normal 20px 'Bitter', serif;
color: #2A88AD;
margin-bottom: 5px;
}
section span {
background: #2A88AD;
padding: 5px 10px 5px 10px;
position: absolute;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 4px solid #fff;
font-size: 14px;
margin-left: -45px;
color: #fff;
margin-top: -3px;
}
input[type="button"],
input[type="submit"]{
background: #2A88AD;
padding: 8px 20px 8px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
font-size: 15px;
}
input[type="button"]:hover,
input[type="submit"]:hover{
background: #2A6881;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}
</style>
<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<img src="http://www.greenman-advertising.com/wp-content/uploads/2013/08/header_problemSolving_03.jpg">
<form id="myForm" runat="server">
<h1>Job application<span>Apply now and get the opportunity to join us!</span></h1>
<section> <span>1</span>Personal details</section>
Full name: <input type="text" name="name" placeholder="First name & Last name"/><br/>
Date of birth: <input type="text" name="birth" placeholder="dd/mm/yyyy"/><br/>
Nationality: <select name="nationality">
<option>Test1</option>
<option>Test2</option>
<option>Test3</option>
</select><br/>
Marital status: <select name="marital">
<option>...</option>
<option>Married</option>
<option>Single</option>
</select><br/>
Please state the age of your children who will be registered in our school: <input type="text" name="children" placeholder="Example: 5;9;12 or 0"/><br/>
<section> <span>2</span>Experiences and qualifications</section>
Years of experience: <select name="years">
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>10+</option>
</select><br/>
Highest qualification obtained: <input type="text" name="qualification" placeholder="Example: Degree, Master, .."/><br/>
Educational qualification obtained: <input type="text" name="educational" placeholder="Example: QTS,PGCE,CELTA, .."/><br/>
English language level: <select name="profiency">
<option>...</option>
<option>Fluent English proficient</option>
<option>Advanced</option>
<option>Intermediate</option>
<option>Early intermediate</option>
<option>Beginner</option>
</select><br/>
<section> <span>3</span>Position applied for</section>
Subject: <select name="subject">
<optgroup label="Teaching">
<option>...</option>
<option>Arts</option>
<option>Biology</option>
<option>Chemistry</option>
<option>Computer Science</option>
<option>English</option>
<option>Math</option>
<option>Physics</option>
<option>Science</option>
<option>Social Studies</option>
</optgroup>
<optgroup label="Other">
<option>...</option>
<option>Principal</option>
<option>Deputy principal</option>
<option>Educational spervisor</option>
</optgroup>
</select><br/>
Grade level ( or Section): <select name="grade">
<option>...</option>
<option>Higher grades</option>
<option>Lower grades</option>
<option>IGCSE</option>
<option>AS</option>
<option>A2</option>
<option>SAT</option>
</select><br/>
<section> <span>4</span>Contact details</section>
Email: <input type="email" name="email" placeholder="example#domain.com"/><br/>
Phone number: <input type="text" name="phone" placeholder="[+]code country/phone number"/><br/>
Skype: <input type="text" name="skype" placeholder="username"/><br/>
<section> <span>5</span>Attachments</section>
CV (pdf/doc/docx only): <input type="file" name="myFile"/><br/>
Qualification (scan): <input type="file" name="myFile2"/><br/>
Other qualification (scan): <input type="file" name="myFile3"/><br/>
Passport (scan): <input type="file" name="myFile4"/><br/>
<input type="submit" value="Apply"
onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" /><br/>
</form>
</div>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
Code.gs
var submissionSSKey = '1urIXPV2NdsqTJ5zXJb1_t_EdsY7Kuh3VcSBJ4cnPIEg';
var folderId = "0B0lYW3YSUvX2ZDc0WnhJdFhkQk0";
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob = theForm.myFile;
var fileBlob2 = theForm.myFile2;
var fileBlob3 = theForm.myFile3;
var fileBlob4 = theForm.myFile4;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);
var doc2 = folder.createFile(fileBlob2);
var doc3 = folder.createFile(fileBlob3);
var doc4 = folder.createFile(fileBlob4);
// Fill in response template
var template = HtmlService.createTemplateFromFile('Thanks.html');
var name = template.name = theForm.name;
var birth = template.birth = theForm.birth;
var nationality = template.nationality = theForm.nationality;
var marital = template.marital = theForm.marital;
var children = template.children = theForm.children;
var years = template.years = theForm.years;
var profiency = template.profiency = theForm.profiency;
var qualification = template.qualification = theForm.qualification;
var educational = template.educational = theForm.educational;
var subject = template.subject = theForm.subject;
var grade = template.grade = theForm.grade;
var email = template.email = theForm.email;
var phone = template.phone = theForm.phone;
var skype = template.skype = theForm.skype;
var fileUrl = template.fileUrl = doc.getUrl();
var fileUrl2 = template.fileUrl = doc2.getUrl();
var fileUrl3 = template.fileUrl = doc3.getUrl();
var fileUrl4 = template.fileUrl = doc4.getUrl();
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 18).setValues([[name,birth,nationality,marital,children,profiency,years,qualification,educational,subject,grade,email,phone,skype,fileUrl,fileUrl2,fileUrl3,fileUrl4]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
Thanks.html
<div>
<h2>Thank you <?= name ?>, <br>your application has been received.</h2>
</div>
Yes, something has recently changed. The default sandbox mode is now IFRAME. Your doGet() function does not designate a sandbox mode, so it now defaults to IFRAME. This has changed the behavior of your form. You have an <input> tag that is a button of the submit type. This causes the form to issue either a GET or POST request when the form is submitted. That causes the screen to go blank, and is probably interfering with the google.script.run.myfunction() call to the server. Change the input button type from submit to button.
Currently:
<input type="submit" value="Apply"
Change to:
<input type="button" value="Apply"
I modified the code for the function named toggle_visibility
if(e.style.display !== 'none')//Modified this line
Was:
if(e.style.display === 'block')
The style could be many different settings. If it's inline for example, then that would break the code. But if it's !== "none", then if it's anything but none, then it's obviously being displayed.
Here is a link to a shared Apps Script file:
Link to Shared Apps Script File
Following your advice, I've visited this page Migrating to IFRAME Sandbox Mode
and made the following change:
function doGet() {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
and I changed the type to "button" but nothing is happening: it keeps at "Uploading. Please wait..." for ever
So Im using Bootstrap 3, JQuery and Jquery-UIs autocomplete. So on the my project, the result looks like this,
But according to the documentation page, it is supposed to look like this
with the clickable items on mouse over and everything. My search box HTML is as follows:
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input id="titles" type="text" placeholder="Search" class="form-control">
</div>
<button type="submit" class="btn btn-default">GO</button>
</form>
The documentation page for jquery-ui autocomplete widget is here
Any pointers? Thanks in advance. PS:The photos were taken by a potato :-)
#dmlittle gave me the idea
You need to also style the autocomplete widget the Boostrap way
.ui-autocomplete {
position: absolute;
z-index: 1000;
cursor: default;
padding: 0;
margin-top: 2px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete > li {
padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
background-color: #DDD;
}
.ui-helper-hidden-accessible {
display: none;
}
I want to custom my checkbox. I see this method of custom all the time :
input[type=checkbox] {
display:none;
}
.my_label {
display: inline-block;
cursor: pointer;
font-size: 13px;
margin-right:15px;
margin-bottom:8px;
line-height:18px;
}
.my_label:before {
content: "";
width: 15px;
height: 15px;
display: inline-block;
vertical-align:middle;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
background-image: url("images/checkbox-bg.gif");
}
input[type=checkbox]:checked + .my_label:before {
background: url("images/checkbox-checked-bg.gif");
font-size: 15px;
}
It's ok when we have this:
<input type="checkbox" id="my_checkbox"> <label for="my_checkbox" class="my_label">
But atm in my code I need to have NO label. Just 1 checkbox that depends on nothing.
Just something like that :
<input class="my_checkbox_class" id="my_checkbox_id" onclick="my_function()">
Any idea please?
I'm sure it's pretty simple, I'm sorry by advance..
Thanks.
You can apply the :before and :after pseudo-styles to the checkbox itself, and rather than hide the box, just set its width to 0:
input[type=checkbox] {
width:0px;
margin-right:25px;
}
input[type=checkbox]:before {
content: "";
width: 15px;
height: 15px;
display: inline-block;
vertical-align:middle;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
background-color:#ccc;
}
input[type=checkbox]:checked:before {
background-color:red;
font-size: 15px;
}
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
If you are comfortable using a little bit of Javacript / jQuery, then you could add a label at runtime and the same CSS would apply. You also don't need ::before or ::after pseudo-elements.
For example, on document ready find all checkboxes and then add a label after each of them. Remember, to assign checkbox id to the label's for attribute. Something like this:
$("input[type=checkbox]").each(function() {
var $lbl = $("<label>");
$lbl.attr("for", this.id);
$(this).after($lbl);
});
Note: The benefit of this approach is that you can re-use your existing CSS. No need to change anything. I suppose this is what you wanted in your question.
Demo Fiddle: http://jsfiddle.net/abhitalks/pdczc9vo/2/
Snippet:
$("input[type=checkbox]").each(function() {
var $lbl = $("<label>");
$lbl.attr("for", this.id);
$(this).after($lbl);
});
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
display: inline-block;
width: 16px; height: 16px;
border: 1px solid gray;
background-color: #eee;
cursor: pointer;
margin: 0px 8px;
}
input[type=checkbox]:checked + label {
background-color: #dd6666;
}
input[type=checkbox] + label:hover {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chk1" />
<input type="checkbox" id="chk2" />
<input type="checkbox" id="chk3" />
<input type="checkbox" id="chk4" />