Im triying to make this box 1:1 with css, but I have so low css skills. Picture of the box -> http://prntscr.com/l6kyob (left - when checkbox clicked, right - when its not), live demo here -> https://victorthemes.com/themes/glazov/gallery/photography-trend/
That's what I've done so far
jQuery(document).ready(function($){
$(".image-checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
}
else {
$(this).removeClass('image-checkbox-checked');
}
});
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked",!$checkbox.prop("checked"))
e.preventDefault();
});
});
.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image-checkbox input[type="checkbox"] {
display: none;
}
.image-checkbox-checked {
border-color: #4783B0;
}
.image-checkbox .fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image-checkbox-checked .fa {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="usergalleryimages[]" value="">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="usergalleryimages[]" value="">
<i class="fa fa-check hidden"></i>
</label>
</div>
Please, give me some hints how I can do this.
Thank you!!!
<input id='chk0' type='checkbox'> <label for="chk0"></label>
For CSS, input/label pairs do the following:
Tags
Place the checkbox before the label
Place anything that changes "state" (ex. off/on) after or within the label
Attributes
Assign #id to checkbox and a .class that is shared by all checkboxes
Assign for to label with the value of checkbox #id
CSS
Use the adjacent sibling combinator and the pseudo-class :checked like so:
.classOfCheckbox:checked + label .fa-check {
display: block;
}
.classOfCheckbox:checked + label .fa-times {
display: none;
}
Demo
.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.chk {
display: none;
}
.chk:checked+.image-checkbox {
border-color: #4783B0;
}
.image-checkbox .fas {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.fa-check {
display: none;
}
.chk:checked+.image-checkbox .fa-check {
display: block !important;
}
.chk:checked+.image-checkbox .fa-times {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<input id="chk0" class="chk" type="checkbox" name="usergalleryimages[]" value="">
<label class="image-checkbox" for="chk0">
<img class="img-responsive" src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/Proofing-three.jpg" />
<i class="fas fa-check"></i>
<i class="fas fa-times"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<input id="chk1" class="chk" type="checkbox" name="usergalleryimages[]" value="">
<label class="image-checkbox" for="chk1">
<img class="img-responsive" src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/11/G-Proofing-six.jpg" />
<i class="fas fa-check"></i>
<i class="fas fa-times"></i>
</label>
</div>
Related
Problem
Once the input is entered in the input field, and the check button is clicked, the input element gets converted into a span element and the check icon gets converted into an edit icon.
I want that when someone clicks on the edit icon, the span element gets converted into the input element again.
const container = document.querySelector(".container");
// Creating a SPAN element and appending it to div
container.addEventListener("click", (e) => {
const tgt = e.target.closest(".icons");
if (tgt) {
if (tgt.classList.contains("swapped")) return; // stop
if (tgt.classList.contains("check-icon")) {
tgt.classList.add("swapped");
let texts = document.querySelectorAll(".text");
let items = document.querySelectorAll(".items");
texts.forEach((text, i) => {
let span = document.createElement("span");
let val = document.createTextNode(text.value ? text.value : "");
span.appendChild(val);
span.classList.add("text2");
items[i].appendChild(span);
if (text.value) text.value = ""; // setting the input value to empty once clicked onto the check button
text.parentNode.replaceChild(span, text);
let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
if (tgt.classList.contains("check-icon")) {
Array.from(btns).forEach((ele) => {
ele.classList.toggle("hidden");
});
}
});
}
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
</div>
<div class="check-icon icons mainicon">
<i class="fa fa-check " aria-hidden="true"></i>
</div>
<div class="edit-icon icons hidden mainicon">
<i class="far fa-edit " aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
Js Fiddle
In your js file.
Modify the check-icon help block a bit, add the following code in the loop of btns.
if (ele.classList.contains("check-icon")) {
ele.classList.remove("swapped");
}
Adding this additional if block will help.
if (tgt.classList.contains("edit-icon")) {
let texts = document.querySelectorAll(".text2");
let items = document.querySelectorAll(".items");
texts.forEach((text, i) => {
let input = document.createElement("input");
input.value = text.textContent;
input.classList.add("text");
items[i].appendChild(input);
text.parentNode.replaceChild(input, text);
let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
Array.from(btns).forEach((ele) => {
ele.classList.toggle("hidden");
if (ele.classList.contains("check-icon")) {
ele.classList.remove("swapped");
}
});
});
}
jsFiddel link
Created a span element next to inputs, hidden by default.
Created 2 different click events for edit and check buttons.
On click one element type is made hidden and the other looses its hidden class.
Did not work on styling so you may want to do that yourself.
Also it's better to change .span class to something appropriate.
Khalil's suggestion about making inputs disabled sound good, too.
const container = document.querySelector(".container");
const editIcon = document.querySelector(".edit-icon");
const checkIcon = document.querySelector(".check-icon");
const inputs = [...container.querySelectorAll('.text')]
const spans = [...container.querySelectorAll('.span')]
editIcon.addEventListener('click', () => {
spans.forEach((el, i) => {
el.classList.add('hidden');
inputs[i].classList.remove('hidden');
})
editIcon.classList.add('hidden');
checkIcon.classList.remove('hidden');
})
checkIcon.addEventListener('click', () => {
inputs.forEach((el, i) => {
spans[i].textContent = el.value;
el.classList.add('hidden');
spans[i].classList.remove('hidden');
})
checkIcon.classList.add('hidden');
editIcon.classList.remove('hidden');
})
.mainContainer {
height: 400px;
width: 900px;
background-color: white;
margin: 200px auto;
border: 5px solid black;
border-radius: 8px;
}
.heading {
font-family: "Roboto", sans-serif;
font-weight: bold;
text-align: center;
position: relative;
top: 15px;
}
.container {
width: 800px;
height: auto;
border: 2px solid black;
display: grid;
grid-template-columns: 230px 230px 230px 50px 50px 50px;
align-items: center;
margin: auto;
position: relative;
top: 30px;
padding: 10px;
background-color: #007bff;
}
.items {
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;
font-weight: bold;
color: #fff;
}
.text {
width: 130px;
}
.icons {
font-size: 18px;
border: 2px solid #fff;
margin-left: 12px;
color: #007bff;
cursor: pointer;
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.icons:hover {
color: #fff;
background-color: #007bff;
}
.hidden {
display: none;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="check-icon icons mainicon">
<i class="fa fa-check " aria-hidden="true"></i>
</div>
<div class="edit-icon icons hidden mainicon">
<i class="far fa-edit " aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>
function togchq3chn(x) {
for (i = 1; i < 10; i++) {
var k = "kd" + i;
var c = "cd" + i;
if (x.id == k) {
document.getElementById(c).style.display = "block";
}
}
}
.chqsqr {
width: 25px;
height: 25px;
border: 1px solid rgb(180, 180, 180);
border-radius: 2px;
}
.shcursor {
cursor: pointer;
}
.inlineblock {
display: inline-block !important;
}
.bluefont {
color: rgb(0, 98, 167) !important;
}
.f17 {
font-size: 1.7em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd1" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd1" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd2" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd2" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd3" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd3" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
</body>
</html>
Once i click on the check box it get selected but if i again click on the same check box the yes tick is not getting disabled.
I try that else section else{document.getElementById(c).style.display = "none";} but when i do this code. at time one checkbox i can get selected. this will work like a toggled.
Requirement: On the checkbox if i click again the yes tick will get respective checkbox yest tick disappeared.
You don't need to give one unique ID to each <div> and to each <i>. You don't need to loop 10 times on click, generate IDs, test if each ID matches the element you clicked, then show/hide another element with a composed ID.
What you are trying to do can be done with a simple toggle() on click. (And one jQuery!)
$(".chqsqr").click(function() {
$(this).find("i").toggle()
});
.chqsqr {
width: 25px;
height: 25px;
border: 1px solid rgb(180, 180, 180);
border-radius: 2px;
}
.shcursor {
cursor: pointer;
}
.inlineblock {
display: inline-block !important;
}
.bluefont {
color: rgb(0, 98, 167) !important;
}
.f17 {
font-size: 1.7em !important;
}
i.fas {
position: relative;
display: none;
top: -2px;
left: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock">
<i class="fas fa-check"></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock">
<i class="fas fa-check"></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd3">
<i class="fas fa-check" ></i>
</div>
</div>
If I understood your question then you wanted something like this?
function clickFunction(prop){
var nameProp = document.getElementsByName(prop.name);
var idProp = document.getElementById(prop.id);
if (idProp.checked) {
for(var i=0; i < nameProp.length; i++){
nameProp[i].disabled = false;
}
}
}
<tr><td><input type="checkbox" name="box" id="box1" value="1" tabIndex="1" onClick="clickFunction(this)">Test 1</td></tr>
<tr><td><input type="checkbox" name="box" id="box2" value="1" tabIndex="1" onClick="clickFunction(this)">Test 2</td></tr>
<tr><td><input type="checkbox" name="box" id="box3" value="1" tabIndex="1" onClick="clickFunction(this)">Test 3</td></tr>
On loading of the website, the navbar's expected design is
I have tried this, but wasn't able to set the button's state as clicked.
The output I achieved in video format : https://files.fm/u/zpnp3t2ee
You could try with input radio buttons.
Which ever [type="radio"] that is checked, will have the colored bottom border.
Note: I'm using FontAwesome for the menu icons.
.menu {
display: block;
}
.menu .menu-item {
cursor: default;
display: inline;
}
.menu .menu-item [type="radio"] {
position: absolute;
left: -100vw;
}
.menu .menu-item [type="radio"]:checked ~ label {
border-bottom: 4px solid #080;
}
.menu .menu-item label {
border-bottom: 4px solid transparent;
cursor: pointer;
display: inline-block;
padding: 4px 8px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet"/>
<div class="menu">
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemDashboard" value="Dashboard" checked>
<label for="MenuItemDashboard"><span class="fa fa-tachometer-alt"></span> Dashboard</label>
</div>
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemClasses" value="Classes">
<label for="MenuItemClasses"><span class="fa fa-chalkboard"></span> Classes</label>
</div>
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemTimeTable" value="TimeTable">
<label for="MenuItemTimeTable"><span class="fa fa-calendar-alt"></span> Time Table</label>
</div>
</div>
I'm trying to create a timepicker, with the following elements:
Up buttons for the hour and time;
Two displays for next time, one for the next hour and the other for next minutes;
Two displays for current time, one for the current hour and the other for current minutes;
Two displays for the previous time, one for the previous hour and one for the previous minutes;
Down buttons for the hour and time.
I'm trying to create the idea of movement when you press any of the buttons.
This is the visual aspect I've achieved so far:
What I could not do:
To present the upper part of the numbers, on the previous time displays.
What am I doing wrong, and how can I fix it, using javascript, css, jquery and html?
To create the visual look of my timepicker, I used the following code:
$(document).ready(function() {
$("#th31").html("01");
$("#tm31").html("01");
$("#th3").html("00");
$("#tm3").html("00");
$("#th32").html("23");
$("#tm32").html("59");
} );
.modal-pop-up-time{
background-color: WhiteSmoke ;
cursor:pointer;
display:block;
width: 200px;
height: 150px;
position: absolute;
left: 52%;
z-index:10001;
}
.flex-container{
position: relative;
/* Other styling stuff */
width: 50px;
height: 25px;
background-color: #3498db;
}
.flex-container1{
position: relative;
display: inline-block;
/* Other styling stuff */
width: 50px;
height: 10px;
background-color: red;
}
.spinner {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.spinner-input-wrapper {
display: flex;
}
.spinner-input {
margin: 0 3px;
}
.inner-element{
position: absolute;
left: 50%;
top: 50%;
width: 80%;
height: 100%;
transform: translate(-50%,-50%);
/* or 3d alternative if you will add animations (smoother transitions) */
transform: translate3d(-50%,-50%,0);
}
.triangle-up,
.triangle-down {
width: 0;
height: 0;
border: 4px solid transparent;
}
.triangle-up {
border-bottom-width: 8px;
border-bottom-color: #555;
}
.triangle-down {
border-top-width: 8px;
border-top-color: #555;
}
.div-overflow-hide{
overflow: hidden;
}
.input-line-height{
line-height: 10% !important;
}
.input-text-center{
text-align: center !important;
}
.input-background-color{
background-color: DeepSkyBlue ;
}
.input-background-color-white{
background-color: white ;
}
.input-text-color{
color: White;
}
.div-center-element{
margin:auto;
}
.div-ml-40{
margin-left: 40% !important;
}
.div-mlr-5{
margin-right: 5% !important;
margin-left: 5% !important;
}
.div-ml-10{
margin-left: 10% !important;
}
.div-ml-5{
margin-left: 20% !important;
}
.div-tiangles-background-color{
background-color: yellow;
}
<link href="lib/noty.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div tabindex="-1" class = "modal-pop-up-time" id = "popupreg">
<div class="spinner-input-wrapper div-ml-10">
<div class="spinner div-mt-5">
<label class="div-ml-5">HH</label>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-up div-ml-40" id="up4"></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th31" ></div>
</div>
<div class= "flex-container " tabindex="2" >
<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "th3" ></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th32" ></div>
</div>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-down div-ml-40" id="down4"></div>
</div>
</div>
<div class= "spinner div-mt-5">
<label class="div-mlr-5" >:</label>
</div>
<div class="spinner divmarginhor div-mt-5" >
<label class="div-ml-5" >MM</label>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-up div-ml-40" id="up5"></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "tm31" ></div>
</div>
<div class= "flex-container" tabindex="2">
<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "tm3" ></div>
</div >
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height input-background-color-white inner-element div-overflow-hide" id = "tm32" ></div>
</div>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-down div-ml-40" id="down5"></div>
</div>
</div>
</div>
</div>
You can achieve what you want using some absolute positioning and line-height:
.timebox {
display: inline-block;
line-height: 2em;
height: 4em; /* only wants to be double the line-height */
overflow: hidden;
position: relative;
width: 2em; /* can be what you want */
}
.inner {
height: 6em; /* timebox line-height multiplied by 3 (number of numbers */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.number {
width: 2em;
text-align: center;
}
<div class="timebox">
<div class="inner">
<div class="number">
1
</div>
<div class="number">
2
</div>
<div class="number">
3
</div>
</div>
</div>
<div class="timebox">
<div class="inner">
<div class="number">
21
</div>
<div class="number">
22
</div>
<div class="number">
23
</div>
</div>
</div>
I have code for an image gallery created with bootstrap where I'd like a delete button on rollover. However, the div or button (whatever works) is absolutely positioned over an image inside a label, where the whole image is clickable.
My codepen for this is here - https://codepen.io/leecolarelli/pen/ZqMmrw
I have tried placing the <i class="fa fa-times"></i> inside a div or a button, and having that div or button outside of the label tag, but it still didn't work.
How can i make the cross clickable?
<!-- Start of: Image Entry -->
<div class="col-xs-6 col-sm-4 col-md-3 text-center">
<label class="image-checkbox">
<img class="img-fluid" src="https://via.placeholder.com/600x400" />
<input type="radio" id="" name="presetimage" value="" />
<i class="fa fa-check"></i>
<i class="fa fa-times"></i>
</label>
</div>
<!-- End of: Image Entry -->
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
position: relative;
input[type="checkbox"] {
display: none;
}
input[type="radio"] {
display: none;
}
&:hover {
.fa-times {
visibility: visible;
}
}
&.image-checkbox-checked {
border-color: #4783B0;
.fa-check {
visibility: visible;
}
}
.fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
visibility: hidden;
&.fa-check {
top: 0;
right: 0;
}
&.fa-times {
top: 0;
left: 0;
}
}
}
$(function () {
$('input[name="presetimage"]').on('click', function() {
$(".image-checkbox-checked").removeClass("image-checkbox-checked");
$(this).parent().toggleClass("image-checkbox-checked");
});
})
Cross mark can be made clickable as follows,
$('.fa-times').on('click', function(e){
alert("Cross mark clicked");
});
And also comment the css border color as follows as it appear whole image is selected
&.image-checkbox-checked {
/*border-color: #4783B0;*/
.fa-check {
visibility: visible;
}
}