Simple calculator project - javascript

my name is Daniel Asa. I started a project for practice to make the following codes
HTML
function display(val) {
document.getElementById("id").value += val;
}
function solve() {
let x = document.getElementById("id").value;
let y = eval(x);
document.getElementById("id").value = y;
}
function clr(){
document.getElementById("id").value = " ";
}
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f1f1f1f1;
font-family: sans-serif;
}
.calculator {
width: 300px;
padding-bottom: 15px;
border-radius: 7px;
background-color: black;
box-shadow: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);
}
.display {
width: 100%;
height: 80px;
border: none;
box-sizing: border-box;
padding: 10px;
font-size: xx-large;
background-color: #cccecc;
color: black;
text-align: right;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
button {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
outline: none;
font-size: x-large;
background-color: white;
color: black;
margin: 10px;
}
button:hover{
cursor: pointer;
}
.row {
display: flex;
justify-content: space-between;
}
.operators {
background-color: #ff9500;
font-weight: bold;
color: black;
}
.equals {
background-color: rgb(85, 84, 84);
font-weight: bold;
color: black;
}
<div class="calculator">
<input type="text" class="display" id="id">
<div class="keys">
<div class="row">
<button value="7" onclick="('7')">7</button>
<button value="8" onclick="('8')">8</button>
<button value="9" onclick="('9')">9</button>
<button value="+" class="operators" onclick="('+')">+</button>
</div>
<div class="row">
<button value="4" onclick="('4')">4</button>
<button value="5" onclick="('5')">5</button>
<button value="6" onclick="('6')">6</button>
<button value="-" class="operators" onclick="('-')">-</button>
</div>
<div class="row">
<button value="1" onclick="('1')">1</button>
<button value="2" onclick="('2')">2</button>
<button value="3" onclick="('3')">3</button>
<button value="*" class="operators"onclick="('*')">*</button>
</div>
<div class="row">
<button value="C" class="operators" onclick="clr()">C</button>
<button value="0" onclick="('0')">0</button>
<button value="/" class="operators" onclick="('/')">/</button>
<button value="=" class="equals" onclick="solve()">=</button>
</div>
</div>
There is no problem so far, but I don't know why in the output of the project, when I click on the values I put, it is like a button, I click on the input I put, it is not displayed?
Does anyone know the problem because I followed the right path as far as I know?


I am not sure if i do understand you correctly. But you miss to call the display function. You should call display('0') in your onClick handler not simply ('0')
function display(val) {
document.getElementById("id").value += val;
}
function solve() {
let x = document.getElementById("id").value;
let y = eval(x);
document.getElementById("id").value = y;
}
function clr(){
document.getElementById("id").value = " ";
}
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f1f1f1f1;
font-family: sans-serif;
}
.calculator {
width: 300px;
padding-bottom: 15px;
border-radius: 7px;
background-color: black;
box-shadow: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);
}
.display {
width: 100%;
height: 80px;
border: none;
box-sizing: border-box;
padding: 10px;
font-size: xx-large;
background-color: #cccecc;
color: black;
text-align: right;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
button {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
outline: none;
font-size: x-large;
background-color: white;
color: black;
margin: 10px;
}
button:hover{
cursor: pointer;
}
.row {
display: flex;
justify-content: space-between;
}
.operators {
background-color: #ff9500;
font-weight: bold;
color: black;
}
.equals {
background-color: rgb(85, 84, 84);
font-weight: bold;
color: black;
}
<div class="calculator">
<input type="text" class="display" id="id">
<div class="keys">
<div class="row">
<button value="7" onclick="display('7')">7</button>
<button value="8" onclick="display('8')">8</button>
<button value="9" onclick="display('9')">9</button>
<button value="+" class="operators" onclick="display('+')">+</button>
</div>
<div class="row">
<button value="4" onclick="display('4')">4</button>
<button value="5" onclick="display('5')">5</button>
<button value="6" onclick="display('6')">6</button>
<button value="-" class="operators" onclick="display('-')">-</button>
</div>
<div class="row">
<button value="1" onclick="display('1')">1</button>
<button value="2" onclick="display('2')">2</button>
<button value="3" onclick="display('3')">3</button>
<button value="*" class="operators"onclick="display('*')">*</button>
</div>
<div class="row">
<button value="C" class="operators" onclick="clr()">C</button>
<button value="0" onclick="display('0')">0</button>
<button value="/" class="operators" onclick="display('/')">/</button>
<button value="=" class="equals" onclick="solve()">=</button>
</div>
</div>

Related

Form input checkbox and file type isn't functioning

I'm trying to make a form for adding a blog page.
I have title form, date form, content form, checkbox for blog category form and image form for the topic image.
When I try to fill the form, only the 3 of the 4 checkbox forms that worked and when I click upload image it won't show the file selector.
Here's the screenshot:
Form screenshot
This is what I'm trying to achieve:
Form screenshot
I've tried to browse for solution but my English isn't very good for browsing, I don't know the keyword to search for the solution.
Please help, I've stuck on this for 3 hours.
Here's the full code:
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
/* FORM */
.mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
/* x FORM */
<div class="mpi-form">
<!--MP = My Project Input-->
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
Thanks

The very first mistake is you have added different id than for
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
Here for value is reactJs but input id is checkReact
Second mistake is same as above
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
label for value is input-blog-image but input id is inputImage
Make those changes, will work fine.
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="reactJs" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="input-blog-image" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>

The problem is the wrong value for the for attribute on two label elements. These are:
<label for="reactJs" class="check-label">
<label for="input-blog-image">
And the correct values would be:
<label for="checkReact" class="check-label">
<label for="inputImage">

Hovering over all buttons in vanilla JS

I need the refresh_button to appear and disappear only on mouseover/mouseout on the avatar(image).
I've build this functionality and it works, however, it appears on image hover + on span hover too.
Could you please spot what's wrong?
When I use the same code on .avatar class it doesn't work, I think the .r reference is null in that case. I need to use vanilla JavaScript.
Thank you
document.querySelectorAll(".tree").forEach(img => {
img.onmouseover = function () {
let refresh_button = img.querySelector(".r");
refresh_button.style.opacity = 1;
};
img.onmouseout = function () {
let refresh_button = img.querySelector(".r");
refresh_button.style.opacity = 0;
};
});
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.namefunc {
display: flex;
justify-content: center;
gap: 10px;
}
.name {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
padding-bottom: 5px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
.name_input {
background: #beebb3;
border: none;
text-align: center;
margin-left: 5px;
margin: 4px;
color: green;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
opacity: 0;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
<div class="container1">
<div id="no1">
<div class="tree">
<div class="avatar">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
</div>
<button id="btn1" class="refresh r"> </button>
<span id="spn1" class="name">
<input class="name_input" type="text" disabled="true" value="Homer Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
<div class="tree">
<div class="avatar">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
</div>
<button id="btn2" class="refresh r"></button>
<span id="spn2" class="name">
<input class="name_input" type="text" disabled="true" value="Marge Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
</div>

In the JS, just because you call the variable img doesn't mean that you are working with the image element, you are working with div.tree nodes.
Addendum: per OP "I need the button to not disappear when hovering over the image and then over the button"
Move the buttons inside .avatar and act on the avatar mouse events:
document.querySelectorAll(".tree").forEach(tn => {
let ava = tn.querySelector(".avatar");
let btn = tn.querySelector(".avatar .r");
ava.onmouseover = function() {
btn.style.opacity = 1;
};
ava.onmouseout = function() {
btn.style.opacity = 0;
};
});
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.namefunc {
display: flex;
justify-content: center;
gap: 10px;
}
.name {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
padding-bottom: 5px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
.name_input {
background: #beebb3;
border: none;
text-align: center;
margin-left: 5px;
margin: 4px;
color: green;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
opacity: 0;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
<div class="container1">
<div id="no1">
<div class="tree">
<div class="avatar">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
<button id="btn1" class="refresh r"> </button>
</div>
<span id="spn1" class="name">
<input class="name_input" type="text" disabled="true" value="Homer Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
<div class="tree">
<div class="avatar">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
<button id="btn2" class="refresh r"></button>
</div>
<span id="spn2" class="name">
<input class="name_input" type="text" disabled="true" value="Marge Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
</div>

Your .forEach loop is iterating over your div.tree elements and then adding mouseover and mouseout event handlers to those div elements, rather than looping over the actual img elements within the div.tree elements.
You also should really be using the modern .addEventListener() method to set up event callbacks, which is more powerful than using event properties, such as onmouseover and onmouseout.
document.querySelectorAll(".tree img").forEach(img => {
img.addEventListener("mouseover", function () {
img.closest(".tree").querySelector(".r").style.opacity = 1;
});
img.addEventListener("mouseout", function () {
img.closest(".tree").querySelector(".r").style.opacity = 0;
});
});
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.namefunc {
display: flex;
justify-content: center;
gap: 10px;
}
.name {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
padding-bottom: 5px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
.name_input {
background: #beebb3;
border: none;
text-align: center;
margin-left: 5px;
margin: 4px;
color: green;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
opacity: 0;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
<div class="container1">
<div id="no1">
<div class="tree">
<div class="avatar">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
</div>
<button id="btn1" class="refresh r"> </button>
<span id="spn1" class="name">
<input class="name_input" type="text" disabled="true" value="Homer Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
<div class="tree">
<div class="avatar">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
</div>
<button id="btn2" class="refresh r"></button>
<span id="spn2" class="name">
<input class="name_input" type="text" disabled="true" value="Marge Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
</div>

Use .avatar selector and nextElementSibling to get refresh button
document.querySelectorAll(".tree .avatar").forEach(img => {
img.onmouseover = function () {
let refresh_button = img.nextElementSibling;
refresh_button.style.opacity = 1;
};
img.onmouseout = function () {
let refresh_button = img.nextElementSibling;
refresh_button.style.opacity = 0;
};
});
document.querySelectorAll(".tree .avatar").forEach(img => {
img.onmouseover = function () {
let refresh_button = img.nextElementSibling;
refresh_button.style.opacity = 1;
};
img.onmouseout = function () {
let refresh_button = img.nextElementSibling;
refresh_button.style.opacity = 0;
};
});
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.namefunc {
display: flex;
justify-content: center;
gap: 10px;
}
.name {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
padding-bottom: 5px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
.name_input {
background: #beebb3;
border: none;
text-align: center;
margin-left: 5px;
margin: 4px;
color: green;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
opacity: 0;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
<div class="container1">
<div id="no1">
<div class="tree">
<div class="avatar">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
</div>
<button id="btn1" class="refresh r"> </button>
<span id="spn1" class="name">
<input class="name_input" type="text" disabled="true" value="Homer Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
<div class="tree">
<div class="avatar">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
</div>
<button id="btn2" class="refresh r"></button>
<span id="spn2" class="name">
<input class="name_input" type="text" disabled="true" value="Marge Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
</div>

How to do a input box placeholder animation

I seen this on a website, where the placeholder text "Pounds" remains on top of input box. Example:
How exactly is that accomplished?
<div id="my-ajax-filter-search">
<form action="" method="post">
<label id="label-lg">Weight</label>
<input type="text" name="search" id="search" value="" >
<input type="submit" id="submit" name="submit" value="See shipping rates" />
</form>
<ul ></ul>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-784a76e1 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="784a76e1" data-element_type="section">
<div id="ajax_filter_search_results" class="elementor-container elementor-column-gap-no np-wrap">
</div>
</section>
</div>
CSS:
.input-text {
min-width: 84px;
}div#my-ajax-filter-search input#search , label#label-lg {
max-width: 250px;
margin: 0 auto;
display: block;
border-radius: 5px;
}
label#label-lg {
color: #fff;
margin-bottom: 6px;
font-weight: bold;
}
div#my-ajax-filter-search input#submit:focus {
outline: none;
}
div#my-ajax-filter-search input#submit {
max-width: 192px;
display: block;
width: 100%;
margin: 15px auto;
background: #fff;
font-family: "Montserrat", Sans-serif;
fill: #373278;
color: #373278;
background-color: #ffffff;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #ffffff;
border-radius: 50px 50px 50px 50px;
box-shadow: 0px 10px 30px -8px rgb(0 0 0 / 16%);
}
div#my-ajax-filter-search input#submit:hover {
color: #ffffff;
background-color: rgba(255,255,255,0);
border-color: #ffffff;
}
.elementor-price-table__feature-inner input {
min-width: 1px;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner {
margin: 0;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner .quantity {
max-width: 67px;
margin: 0 auto;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner a.add_cart.button.product_type_simple {
max-width: 106px;
margin: 12px auto;
display: block;
padding: 17px;
border-radius: 10px;
border: 1px solid;
background: #00a8ff;
color: #fff;
}

You can use this code
body {
font-family: sans-serif;
}
.label-before, .field input:focus + label::before, .field input:valid + label::before {
line-height: 15px;
font-size: 12px;
top: 5px;
background: #fff;
padding: 0 6px;
left: 9px;
}
.field {
position: relative;
margin-bottom: 15px;
margin-top:10px;
display:inline-block;
}
.field label::before {
content: attr(title);
position: absolute;
top: 10px;
left: 15px;
line-height: 30px;
font-size: 14px;
color: #777;
transition: 300ms all;
}
.field input {
width: auto;
height: 50px;
padding: 0px 15px;
padding-top:12px;
box-sizing: border-box;
font-size: 14px;
color: #222;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
.field input:focus {
outline: 0;
border-color: blue;
}
.field input:valid + label::before {
content: attr(data-title);
}
.field input:focus + label::before {
color: blue;
}
<div id="my-ajax-filter-search">
<form action="" method="post">
<div class="control-group">
<div>
<label id="label-lg">Weight</label>
</div>
<div class="field">
<input type="text" required autocomplete="off" name="search" id="search" value="" >
<label for="search" title="Pounds" data-title="Pounds"></label>
</div>
</div>
<input type="submit" id="submit" name="submit" value="See shipping rates" />
</form>
<ul ></ul>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-784a76e1 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="784a76e1" data-element_type="section">
<div id="ajax_filter_search_results" class="elementor-container elementor-column-gap-no np-wrap">
</div>
</section>
</div>

Multiple fill colors in star rating survey

I need to build a 5 star rating responses to set of survey questions. The stars need to be filled with gold color if the rating is 1 or 2 else it need to be filled with green color if the rating is more than 2 star.
I have built the 5 stars which gets filled with gold color. How can I make it dynamic to change color to green?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.rating {
font-size: 0;
}
.rating:after {
content: " ";
clear: both;
display: block;
}
.rating input {
display: none;
}
.rating-label {
height: 16px;
width: 16px;
color: #ccc;
font-size: 24px;
line-height: 16px;
margin-right: 4px;
text-align: center;
display: inline-block;
}
.rating[dir="rtl"] {
unicode-bidi: bidi-override;
}
.rating[dir="rtl"]>input:checked~.rating-label {
font-size: 0;
}
.rating[dir="rtl"]>input:checked~.rating-label:before {
content: "\2605";
color: #feca02;
}
.rating-label.is-active {
color: #feca02;
}
.rating-large .rating-label {
height: 24px;
width: 24px;
font-size: 32px;
margin-right: 8px;
}
.rating-large .rating-label:before {
font-size: 32px;
}
.rating-small .rating-label {
height: 12px;
width: 12px;
font-size: 16px;
margin-right: 2px;
}
.rating-small .rating-label:before {
font-size: 16px;
}
body {
padding: 30px 30px 0;
text-align: center;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rating {
margin: 15px auto;
}
button {
display: inline-block;
padding: 15px 55px;
background-color: #1d1f20;
color: #fff;
border: 0;
font-size: 12px;
text-transform: uppercase;
}
<div class="wrapper">
<form class="demoForm">
<div class="rating rating-large" dir="rtl">
<input type="radio" name="rate" id="5" value="5" />
<label class="rating-label" for="5">&#9734</label>
<input type="radio" name="rate" id="4" value="4" />
<label class="rating-label" for="4">&#9734</label>
<input type="radio" name="rate" id="3" value="3" />
<label class="rating-label" for="3">&#9734</label>
<input type="radio" name="rate" id="2" value="2" />
<label class="rating-label" for="2">&#9734</label>
<input type="radio" name="rate" id="1" value="1" />
<label class="rating-label" for="1">&#9734</label>
</div>
</form>
</div>

You can use the nth-child selector to change the colour dependant on the number of stars chosen.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.rating {
font-size: 0;
}
.rating:after {
content: " ";
clear: both;
display: block;
}
.rating input {
display: none;
}
.rating-label {
height: 16px;
width: 16px;
color: #ccc;
font-size: 24px;
line-height: 16px;
margin-right: 4px;
text-align: center;
display: inline-block;
}
.rating[dir="rtl"] {
unicode-bidi: bidi-override;
}
.rating[dir="rtl"]>input:checked~.rating-label {
font-size: 0;
}
.rating[dir="rtl"]>input:checked~.rating-label:before {
content: "\2605";
color: #feca02;
}
.rating[dir="rtl"]>input:nth-child(1):checked~.rating-label:before {
color: #feca02;
}
.rating[dir="rtl"]>input:nth-child(3):checked~.rating-label:before {
color: green;
}
.rating[dir="rtl"]>input:nth-child(5):checked~.rating-label:before {
color: pink;
}
.rating[dir="rtl"]>input:nth-child(7):checked~.rating-label:before {
color: purple;
}
.rating[dir="rtl"]>input:nth-child(9):checked~.rating-label:before {
color: red;
}
.rating-label.is-active {
color: #feca02;
}
.rating-large .rating-label {
height: 24px;
width: 24px;
font-size: 32px;
margin-right: 8px;
}
.rating-large .rating-label:before {
font-size: 32px;
}
.rating-small .rating-label {
height: 12px;
width: 12px;
font-size: 16px;
margin-right: 2px;
}
.rating-small .rating-label:before {
font-size: 16px;
}
body {
padding: 30px 30px 0;
text-align: center;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rating {
margin: 15px auto;
}
button {
display: inline-block;
padding: 15px 55px;
background-color: #1d1f20;
color: #fff;
border: 0;
font-size: 12px;
text-transform: uppercase;
}
<div class="wrapper">
<form class="demoForm">
<div class="rating rating-large" dir="rtl">
<input type="radio" name="rate" id="5" value="5" />
<label class="rating-label" for="5">&#9734</label>
<input type="radio" name="rate" id="4" value="4" />
<label class="rating-label" for="4">&#9734</label>
<input type="radio" name="rate" id="3" value="3" />
<label class="rating-label" for="3">&#9734</label>
<input type="radio" name="rate" id="2" value="2" />
<label class="rating-label" for="2">&#9734</label>
<input type="radio" name="rate" id="1" value="1" />
<label class="rating-label" for="1">&#9734</label>
</div>
</form>
</div>
The stars need to be filled with gold color if the rating is 1 or 2
else it need to be filled with green color if the rating is more than
2 star
For this specific case you could use the following...
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.rating {
font-size: 0;
}
.rating:after {
content: " ";
clear: both;
display: block;
}
.rating input {
display: none;
}
.rating-label {
height: 16px;
width: 16px;
color: #ccc;
font-size: 24px;
line-height: 16px;
margin-right: 4px;
text-align: center;
display: inline-block;
}
.rating[dir="rtl"] {
unicode-bidi: bidi-override;
}
.rating[dir="rtl"]>input:checked~.rating-label {
font-size: 0;
}
.rating[dir="rtl"]>input:checked~.rating-label:before {
content: "\2605";
color: green;
}
.rating[dir="rtl"]>input:nth-child(7):checked~.rating-label:before,
.rating[dir="rtl"]>input:nth-child(9):checked~.rating-label:before{
color: #feca02;
}
.rating-label.is-active {
color: #feca02;
}
.rating-large .rating-label {
height: 24px;
width: 24px;
font-size: 32px;
margin-right: 8px;
}
.rating-large .rating-label:before {
font-size: 32px;
}
.rating-small .rating-label {
height: 12px;
width: 12px;
font-size: 16px;
margin-right: 2px;
}
.rating-small .rating-label:before {
font-size: 16px;
}
body {
padding: 30px 30px 0;
text-align: center;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rating {
margin: 15px auto;
}
button {
display: inline-block;
padding: 15px 55px;
background-color: #1d1f20;
color: #fff;
border: 0;
font-size: 12px;
text-transform: uppercase;
}
<div class="wrapper">
<form class="demoForm">
<div class="rating rating-large" dir="rtl">
<input type="radio" name="rate" id="5" value="5" />
<label class="rating-label" for="5">&#9734</label>
<input type="radio" name="rate" id="4" value="4" />
<label class="rating-label" for="4">&#9734</label>
<input type="radio" name="rate" id="3" value="3" />
<label class="rating-label" for="3">&#9734</label>
<input type="radio" name="rate" id="2" value="2" />
<label class="rating-label" for="2">&#9734</label>
<input type="radio" name="rate" id="1" value="1" />
<label class="rating-label" for="1">&#9734</label>
</div>
</form>
</div>

Fixing the position of apply button in Multi-Select Checkbox

I have designed multi-select checkbox by using some code snippets.
However, I don't want user to scroll down to the list to select the apply button.
In the Following Snapshot, There is no apply button unless user scroll bottom of the list.
What I am trying to achieve is to show the scroll bar between Select Measure and Apply Button.
JsFiddle
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
function closebox() {
var checkboxes = document.getElementById("checkboxes");
$(checkboxes).delay(5000).fadeIn();
checkboxes.style.display = "none";
}
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {}
}
function getvalues() {
var str = '';
var checks = document.getElementsByClassName('checks');
for (i = 0; i < checks.length; i++) {
if (checks[i].checked === true) {
str += checks[i].value + " ";
}
}
alert(str);
}
function getvalue() {
var str = '';
var checks = document.getElementsByClassName('checks');
alert(checks[0].checked);
}
.multiselect {
width: 180px;
}
.selectBox {
/* position: relative; */
position: relative
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
line-height: 0px;
height: 100px;
padding: 0px;
border: 1px #dadada solid;
overflow-y: scroll;
overflow-x: hidden;
}
#checkboxes::-webkit-scrollbar {
width: 6px;
}
#checkboxes::-webkit-scrollbar-thumb {
background-color: grey;
outline: 1px solid slategrey;
border-radius: 4px;
}
select {
background-color: #e6e6e6;
border: thin solid #e6e6e6;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1em;
padding: 0.5em 3.5em 0.5em 1em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
cursor: pointer;
outline: 0;
color: #7b7b7b;
}
.selectBox:after {
content: "\f13a";
font-family: "FontAwesome";
padding: 10px 0px 10px 2px;
position: absolute;
right: 10px;
top: 0;
color: #7b7b7b;
font-size: 15px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
label {
cursor: pointer;
color: #666;
display: block;
margin: 0px 4px 2px -29px;
padding: 3px;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.label-text:before {
content: "\f096";
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked+.label-text:before {
content: "\f14a";
color: #06a3e9;
}
input[type="checkbox"]:disabled+.label-text {
color: #aaa;
}
input[type="checkbox"]:disabled+.label-text:before {
content: "\f0c8";
color: #ccc;
}
.submit {
background: #ff8080;
color: #008080;
padding: 10px 5px 5px;
border: 0;
width: 100%;
font-size: 14px;
cursor: pointer;
text-align: center;
}
ul {
padding: 0px 0px 2px 34px;
}
li {
list-style: none;
padding: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select class="round">
<option>Select Measure</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li> <label> <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">Item One</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="2"><span class="label-text">Item Two</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">Item Three</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">Item Four</span></label></li>
<li> <label> <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">Item Five</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">Item Six</span></label></li>
</ul>
<label> <input type="submit" class="submit round" value="APPLY"></label>
</div>
</div>
</form>
<button onclick="getvalues()"> Get Values </button>
/

You can move the label out of the checkboxes, so when you scroll - you will scroll only the checkboxes:
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes-container");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
function closebox() {
var checkboxes = document.getElementById("checkboxes-container");
$(checkboxes).delay(5000).fadeIn();
checkboxes.style.display = "none";
}
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {}
}
function getvalues() {
var str = '';
var checks = document.getElementsByClassName('checks');
for (i = 0; i < checks.length; i++) {
if (checks[i].checked === true) {
str += checks[i].value + " ";
}
}
alert(str);
}
function getvalue() {
var str = '';
var checks = document.getElementsByClassName('checks');
alert(checks[0].checked);
}
.multiselect {
width: 180px;
}
.selectBox {
/* position: relative; */
position: relative
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes-container {
display: none;
height: 120px;
}
#checkboxes {
line-height: 0px;
height: 80px;
padding: 0px;
border: 1px #dadada solid;
overflow-y: scroll;
overflow-x: hidden;
}
#checkboxes::-webkit-scrollbar {
width: 6px;
}
#checkboxes::-webkit-scrollbar-thumb {
background-color: grey;
outline: 1px solid slategrey;
border-radius: 4px;
}
select {
background-color: #e6e6e6;
border: thin solid #e6e6e6;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1em;
padding: 0.5em 3.5em 0.5em 1em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
cursor: pointer;
outline: 0;
color: #7b7b7b;
}
.selectBox:after {
content: "\f13a";
font-family: "FontAwesome";
padding: 10px 0px 10px 2px;
position: absolute;
right: 10px;
top: 0;
color: #7b7b7b;
font-size: 15px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
label {
cursor: pointer;
color: #666;
display: block;
margin: 0px 4px 2px -29px;
padding: 3px;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.label-text:before {
content: "\f096";
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked+.label-text:before {
content: "\f14a";
color: #06a3e9;
}
input[type="checkbox"]:disabled+.label-text {
color: #aaa;
}
input[type="checkbox"]:disabled+.label-text:before {
content: "\f0c8";
color: #ccc;
}
.submit {
background: #ff8080;
color: #008080;
padding: 10px 5px 5px;
border: 0;
width: 100%;
font-size: 14px;
cursor: pointer;
text-align: center;
}
ul {
padding: 0px 0px 2px 34px;
}
li {
list-style: none;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select class="round">
<option>Select Measure</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes-container">
<div id="checkboxes">
<ul>
<li> <label> <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">Item One</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="2"><span class="label-text">Item Two</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">Item Three</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">Item Four</span></label></li>
<li> <label> <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">Item Five</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">Item Six</span></label></li>
</ul>
</div>
<label> <input type="submit" class="submit round" value="APPLY"></label>
</div>
</div>
</form>
<button onclick="getvalues()"> Get Values </button>

Categories