Develop Reference

Javascript select doesn't work the way I want

I have multiple selects on my site and every single one has to have his individual javascript code for it to work, which bothers me and I have no clue how I can fix it. My code handles every single select and makes it disapear after user clicks something different than select or chooses option from select. It also makes a problem where I have to make separate CSS styling for every select. Please give me some hints how to make it work.
const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
var modal = document.getElementById("selected");
const optionsList = document.querySelectorAll(".option");
const selected2 = document.querySelector(".selected2");
const optionsContainer2 = document.querySelector(".options-container2");
var modal2 = document.getElementById("selected2");
const optionsList2 = document.querySelectorAll(".option2");
var offScreen = document.getElementById("add-node-window");
selected.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
});
selected2.addEventListener("click", () => {
optionsContainer2.classList.toggle("active");
});
optionsList.forEach((o) => {
o.addEventListener("click", () => {
selected.innerHTML = o.querySelector("label").innerHTML;
o.querySelector("input").checked = true;
optionsContainer.classList.remove("active");
});
});
optionsList2.forEach((o) => {
o.addEventListener("click", () => {
selected2.innerHTML = o.querySelector("label").innerHTML;
o.querySelector("input").checked = true;
optionsContainer2.classList.remove("active");
});
});
window.onclick = function (event) {
if (event.target != modal) {
optionsContainer.classList.remove("active");
}
if (event.target != modal2) {
optionsContainer2.classList.remove("active");
}
};
const addNodeBtn = document.querySelector(".add-node-btn");
.select-box {
display: flex;
flex-direction: column;
position: relative;
}
.select-box .options-container {
background-color: rgb(238, 238, 238);
font-family: "Roboto", sans-serif;
width: 100%;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;
max-height: 0;
opacity: 0;
position: absolute;
top: 50px;
order: 1;
min-width: 10rem;
}
.selected {
font-family: "Roboto", sans-serif;
background: white;
border-radius: 8px;
margin-bottom: 8px;
position: relative;
order: 0;
min-width: 10rem;
}
.selected::after {
content: "";
background: url("/static/bx-chevron-down.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;
transition: all 0.4s;
}
.select-box .options-container.active + .selected::after {
transform: rotateX(180deg);
top: -6px;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
text-align: start;
}
.select-box .option:hover {
background: rgb(219, 219, 219);
}
.select-box .option .radio {
display: none;
}
.select-box label {
cursor: pointer;
}
.select-box2 {
display: flex;
flex-direction: column;
position: relative;
}
.select-box2 .options-container2 {
background-color: rgb(238, 238, 238);
font-family: "Roboto", sans-serif;
width: 100%;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;
max-height: 0;
opacity: 0;
position: absolute;
top: 50px;
order: 1;
min-width: 10rem;
}
.selected2 {
font-family: "Roboto", sans-serif;
background: white;
border-radius: 8px;
margin-bottom: 8px;
position: relative;
order: 0;
min-width: 10rem;
}
.selected2::after {
content: "";
background: url("/static/bx-chevron-down.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;
transition: all 0.4s;
}
.select-box2 .options-container2.active + .selected2::after {
transform: rotateX(180deg);
top: -6px;
}
.select-box2 .options-container2.active {
max-height: 240px;
opacity: 1;
}
.select-box2 .option2,
.selected2 {
padding: 12px 24px;
cursor: pointer;
text-align: start;
}
.select-box2 .option2:hover {
background: rgb(219, 219, 219);
}
.select-box2 .option2 .radio2 {
display: none;
}
.select-box2 label {
cursor: pointer;
}
<div class="select-container" id="select-container">
<div class="select-box" id="select-box">
<div class="options-container" id="options-container">
<div class="option">
<input type="radio" class="radio" id="time-asc" name="category" />
<label for="time-asc">Time ascending</label>
</div>
<div class="option">
<input type="radio" class="radio" id="time-dsc" name="category" />
<label for="time-dsc">Time descending</label>
</div>
<div class="option">
<input type="radio" class="radio" id="reward-asc" name="category" />
<label for="reward-asc">Reward ascending</label>
</div>
<div class="option">
<input type="radio" class="radio" id="reward-dsc" name="category" />
<label for="reward-dsc">Reward descending</label>
</div>
</div>
<div class="selected" id="selected">Sort</div>
</div>
</div>
<div class="select-container2">
<div class="select-box2">
<div class="options-container2">
<div class="option2">
<input type="radio" class="radio2" id="by-user" name="category" />
<label for="by-user">By User</label>
</div>
<div class="option2">
<input type="radio" class="radio2" id="by-category" name="category" />
<label for="by-category">By Category</label>
</div>
</div>
<div class="selected2" id="selected2">Filtr</div>
</div>
</div>
</section>
strong text

As far as the CSS goes, you can modify it so that each block targets BOTH select lists instead of repeating it all:
.select-box,
.select-box2 {
display: flex;
flex-direction: column;
position: relative;
}
Assuming these two select lists will always be styled the same, this will save lines of CSS, reduce the chance that you update the style of one and forget the other, and in general is a best practice when it comes to writing CSS.
I suspect your are looking to do the same type of thing with your javascript. The solution will be similar except that with js you will put the code in a function, and call the function when you are add the event listeners like this:
const selected = document.querySelector(".selected");
function toggleActive() {
this.classList.toggle("active");
}
selected.addEventListener( "click", toggleActive );
selected2.addEventListener( "click", toggleActive );
This isn't the exact code you need - but this is the approach you need to take to avoid writing the same JS multiple times.

HTML : Modal should open without me clicking on it

I'm looking for a functionality where, on arriving at page, the animation of modal window popping occurs without the button actually being pressed :
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 30%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 20%;
border-radius: 10%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
text-align : centre
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body style = "background-color : blue">
<h2 style = "text-align: center;">Let's Start</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto; -webkit-box-align: center; ">Describe</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
Name       :
<input type="text" name="name" placeholder="Enter name"><br>
Age         :
<input type="text" name="age" placeholder="Enter age"><br>
Gender      :
<input type="text" name="gender" placeholder="Enter gender"><br>
Symptoms    :
<input type="text" name="symptoms" placeholder="Enter symptoms"><br>
Diagnosis    :
<input type="text" name="diagnosis" placeholder="Enter diagnosis"><br>
Prescription   :
<input type="text" name="prescription" placeholder="Enter prescription"><br>
Advice       :
<input type="text" name="advice" placeholder="Enter advice"><br>
<input type="submit" value="Submit">
</div></centre>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
What happens is that we arrive at this page by redirecting from another page. On reaching here, the page should be blank for a moment, and then the modal would pop up. Please tell me how to do

try this instead,
wait 2 sec(2000ms) to view popup.
setTimeout(function(){
if($(".modal").css("display")=="none"){
$(".modal").css("display","block") ;
}
}, 2000);
setTimeout(function(){
if($(".modal").css("display")=="none"){
$(".modal").css("display","block") ;
}
}, 2000);
body {font-family: Arial, Helvetica, sans-serif;}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 30%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 20%;
border-radius: 10%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
text-align : centre
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
p{color:white;text-align:center;}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</head>
<body style = "background-color : blue">
<h2 style = "text-align: center;">Let's Start</h2>
<p>Wait 2seconds to popup show</p>
<div id="id01" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
Name       :
<input type="text" name="name" placeholder="Enter name"><br>
Age         :
<input type="text" name="age" placeholder="Enter age"><br>
Gender      :
<input type="text" name="gender" placeholder="Enter gender"><br>
Symptoms    :
<input type="text" name="symptoms" placeholder="Enter symptoms"><br>
Diagnosis    :
<input type="text" name="diagnosis" placeholder="Enter diagnosis"><br>
Prescription   :
<input type="text" name="prescription" placeholder="Enter prescription"><br>
Advice       :
<input type="text" name="advice" placeholder="Enter advice"><br>
<input type="submit" value="Submit">
</div></centre>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>

Can someone help me,and fix the animation problem in my javascript?

I'm working on a registration form,and I have a problem with an input field animation,I want to change the color of the input field bottom border to red and the icons color,when the user enter data,which isn't correct for the requirements.This is halfly working with the icons,because they doesn't have javascript animation function,but not working with the fields border colors.
So,when the user click on the input field,I want to play the animation,and make the border green,when the user type something like an "a" character,then the border be red,and if the data match with all of the requirements,then be the border green again.
I think the problem is somewhere in the animation script,at the 271 line,because if I delete that,the border color change start working well,I think the two javascript conflict each other,it's just a bit hint for you. I don't have too much experience in web development.
Here is the code: https://jsfiddle.net/hgf2346v/
function Showfunction() {
var eye = document.getElementById("eye");
var eye2 = document.getElementById("eye2");
var pass = document.getElementById("pass");
if (pass.type === "password") {
pass.type = "text";
eye.style.display = "none";
eye2.style.display = "block";
} else {
pass.type = "password";
eye2.style.display = "none";
eye.style.display = "block";
}
}
function hiddenscript() {
var eye = document.getElementById("eye");
eye.style.display = "block";
}
$(document).ready(function() {
// set initially button state hidden
// use keyup event on email field
$("#email").keyup(function() {
if (validateEmail()) {
// if the email is validated
// set input email border green
$('#inputemail').css('border-bottom', 'solid 2px #38d39f');
$('#iconmail').css('color', '#38d39f');
$("#emailMsg").html("<p class='text-danger'></p>");
$(':input[type="submit"]').prop('disabled', false);
// and set label
} else {
// if the email is not validated
// set border red
$('#inputemail').css('border-bottom', 'solid 2px #e50914');
$('#iconmail').css('color', '#e50914');
$("#emailMsg").html("<p class='text-danger'>Enter valid email.</p>");
$(':input[type="submit"]').prop('disabled', true);
}
});
$("#pass").keyup(function() {
// check
if (validatePassword()) {
// set input password border green
$('#inputpass').css('border-bottom', 'solid 2px #38d39f');
$('#iconpass').css('color', '#38d39f');
$("#passMsg").html("<p class='text-danger'></p>");
$(':input[type="submit"]').prop('disabled', false);
//set passMsg
} else {
$('#inputpass').css('border-bottom', 'solid 2px #e50914');
$('#iconpass').css('color', '#e50914');
$("#passMsg").html("<p class='text-danger'>Password must contain at least 1 digit,<br>and need to contain at least 8 character.</p>");
$(':input[type="submit"]').prop('disabled', true);
}
});
$("#firstName").keyup(function() {
// check
if (validateFirstName()) {
// set input password border green
$('#inputfirstname').css('border-bottom', 'solid 2px #38d39f');
$('#iconfirstname').css('color', '#38d39f');
$("#firstMsg").html("<p class='text-danger'></p>");
$(':input[type="submit"]').prop('disabled', false);
//set passMsg
} else {
$('#inputfirstname').css('border-bottom', 'solid 2px #e50914');
$('#iconfirstname').css('color', '#e50914');
$("#firstMsg").html("<p class='text-danger'>The first name must be at least 3 character long.</p>");
$(':input[type="submit"]').prop('disabled', true);
}
});
$("#lastName").keyup(function() {
// check
if (validateLastName()) {
// set input password border green
$('#inputlastname').css('border-bottom', 'solid 2px #38d39f');
$('#iconlastname').css('color', '#38d39f');
$("#lastMsg").html("<p class='text-danger'></p>");
$(':input[type="submit"]').prop('disabled', false);
//set passMsg
} else {
$('#inputlastname').css('border-bottom', 'solid 2px #e50914');
$('#iconlastname').css('color', '#e50914');
$("#lastMsg").html("<p class='text-danger'>The last name must be at least 3 character long.</p>");
$(':input[type="submit"]').prop('disabled', true);
}
});
});
function validateEmail() {
// get value of input email
var email = $("#email").val();
// use reular expression
var reg = /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/
if (reg.test(email)) {
return true;
} else {
return false;
}
}
function validatePassword() {
var pass = $("#pass").val();
var reg = /^(?=.*\d)(?=.*[a-z])[0-9a-zA-Z]{8,}$/
if (reg.test(pass)) {
return true;
} else {
return false;
}
}
function validateFirstName() {
//get input password value
var first = $("#firstName").val();
// check it s length
if (first.length > 2) {
return true;
} else {
return false;
}
}
function validateLastName() {
//get input password value
var last = $("#lastName").val();
// check it s length
if (last.length > 2) {
return true;
} else {
return false;
}
}
const inputs = document.querySelectorAll(".input");
function addcl() {
let parent = this.parentNode.parentNode;
parent.classList.add("focus");
}
function remcl() {
let parent = this.parentNode.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach(input => {
input.addEventListener("focus", addcl);
input.addEventListener("blur", remcl);
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 7rem;
padding: 0 2rem;
}
.login-content {
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.container {
grid-template-columns: none;
}
form {
padding: 40px;
background-color: #efefee;
width: 460px;
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 5px;
border-radius: 5px;
}
#eye {
position: fixed;
margin-left: 685px;
margin-top: ;
color: #333;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 3;
display: none;
}
#eye2 {
position: fixed;
margin-left: 685px;
margin-top: ;
color: #333;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 3;
display: none;
}
.login-content h2 {
margin: 15px 0;
color: #333;
text-transform: uppercase;
font-size: 2.9rem;
margin-bottom: 105px;
}
.login-content .input-div {
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 45px 0;
padding: 5px 0;
border-bottom: 2px solid #d9d9d9;
}
.login-content .input-div.one {
margin-top: 0;
}
.i {
color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.i i {
transition: .3s;
}
.input-div>div {
position: relative;
height: 45px;
}
.input-div>div>h5 {
/* //Az inputnak a szövege(Username,password) */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #333;
font-size: 18px;
transition: .3s;
}
.input-div:before,
.input-div:after {
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
transition: .4s;
}
.input-div:before {
right: 50%;
}
.input-div:after {
left: 50%;
}
.input-div.focus:before,
.input-div.focus:after {
width: 50%;
}
.input-div.focus>div>h5 {
top: -10px;
font-size: 15px;
}
.input-div.focus>.i>i {
color: #38d39f;
}
.input-div>div>input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 1.2rem;
color: #555;
font-family: 'poppins', sans-serif;
}
.input-div.pass {
margin-bottom: 4px;
}
a {
display: block;
text-align: right;
text-decoration: none;
color: #333;
font-size: 0.9rem;
transition: .3s;
}
a:hover {
color: #38d39f;
text-decoration: underline;
}
.h6 {
font-size: 16px;
display: block;
text-align: right;
text-decoration: none;
color: #333;
font-size: 0.9rem;
transition: .3s;
}
.pasw {
width: 70%;
}
.btn {
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
outline: none;
border: none;
background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
background-size: 200%;
font-size: 1.2rem;
color: #fff;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
margin: 1rem 0;
cursor: pointer;
transition: .5s;
}
.btn:hover {
background-position: right;
}
#media screen and (max-width: 1050px) {
.container {
grid-gap: 5rem;
}
}
#media screen and (max-width: 1000px) {
form {
width: 420px;
}
.login-content h2 {
font-size: 2.4rem;
margin: 8px 0;
margin-top: 5px;
}
#eye {
margin-left: 545px;
}
#eye2 {
margin-left: 545px;
}
}
#media screen and (max-width: 900px) {
.container {
grid-template-columns: 1fr;
}
.img {
display: none;
}
.wave {
display: none;
}
.login-content {
justify-content: center;
}
}
.login-content {
justify-content: center;
}
.text-danger {
position: fixed;
text-align: left;
margin: 0;
margin-top: 58;
font-size: 14px;
color: #e50914;
}
<div class="container">
<div class="login-content">
<form method="POST">
<h2 class="title">Sign Up</h2>
<div class="input-div one" id="inputfirstname">
<div class="i">
<i class="fas fa-user" id="iconfirstname"></i>
</div>
<div class="div">
<h5>First Name</h5>
<input type="text" id="firstName" name="firstName" autocomplete="off" class="input" required>
<span id="firstMsg"></span>
</div>
</div>
<div class="input-div lastname" id="inputlastname">
<div class="i">
<i class="fas fa-user" id="iconlastname"></i>
</div>
<div class="div">
<h5>Last Name</h5>
<input type="text" id="lastName" name="lastName" autocomplete="off" class="input" required>
<span id="lastMsg"></span>
</div>
</div>
<div class="input-div email" id="inputemail">
<div class="i">
<i class="fas fa-envelope" id="iconmail"></i>
</div>
<div class="div">
<h5>Email address</h5>
<input type="email" id="email" name="email" autocomplete="off" class="input" required>
<span id="emailMsg"></span>
</div>
</div>
<div class="input-div pass2" id="inputpass">
<div class="i">
<i class="fas fa-lock" id="iconpass"></i>
<i class="fas fa-eye" id="eye" onclick="Showfunction()"></i>
<i class="fas fa-eye-slash" id="eye2" onclick="Showfunction()"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" name="password" autocomplete="off" class="input" maxlength="22" id="pass" oninput="hiddenscript()" required>
<span id="passMsg"></span>
</div>
</div>
Already have account? Login in!
<input type="submit" name="submitButton" class="btn" id="btSubmit" value="Sign Up">
<h6>By clicking “SIGN UP” you agree the Terms of Use and Privacy Policy.</h6>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
I recommend you guys to save it to index.html,and style.css in a folder,because for some reason on jsfiddle,the error messages for imput fields appear at wrong position,don't know exactly why.
Sorry for bad english knowledge.

You can define an error class that changes the background-color of the :before and :after elements, which you can add or remove after validating the input.
.error.input-div:before, .error.input-div:after {
background-color: #e50914;
}
Live Example:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
overflow: hidden;
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 7rem;
padding: 0 2rem;
}
.login-content {
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.container {
grid-template-columns: none;
}
form {
padding: 40px;
background-color: #efefee;
width: 460px;
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 5px;
border-radius: 5px;
}
#eye {
position: fixed;
margin-left: 685px;
margin-top: ;
color: #333;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 3;
display: none;
}
#eye2 {
position: fixed;
margin-left: 685px;
margin-top: ;
color: #333;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 3;
display: none;
}
.login-content h2 {
margin: 15px 0;
color: #333;
text-transform: uppercase;
font-size: 2.9rem;
margin-bottom: 105px;
}
.login-content .input-div {
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 45px 0;
padding: 5px 0;
border-bottom: 2px solid #d9d9d9;
}
.login-content .input-div.one {
margin-top: 0;
}
.i {
color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.i i {
transition: .3s;
}
.input-div>div {
position: relative;
height: 45px;
}
.input-div>div>h5 {
/* //Az inputnak a szövege(Username,password) */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #333;
font-size: 18px;
transition: .3s;
}
.input-div:before,
.input-div:after {
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
transition: .4s;
}
.error.input-div:before,
.error.input-div:after {
background-color: #e50914;
}
.input-div:before {
right: 50%;
}
.input-div:after {
left: 50%;
}
.input-div.focus:before,
.input-div.focus:after {
width: 50%;
}
.input-div.focus>div>h5 {
top: -10px;
font-size: 15px;
}
.input-div.focus>.i>i {
color: #38d39f;
}
.input-div>div>input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 1.2rem;
color: #555;
font-family: 'poppins', sans-serif;
}
.input-div.pass {
margin-bottom: 4px;
}
a {
display: block;
text-align: right;
text-decoration: none;
color: #333;
font-size: 0.9rem;
transition: .3s;
}
a:hover {
color: #38d39f;
text-decoration: underline;
}
.h6 {
font-size: 16px;
display: block;
text-align: right;
text-decoration: none;
color: #333;
font-size: 0.9rem;
transition: .3s;
}
.pasw {
width: 70%;
}
.btn {
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
outline: none;
border: none;
background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
background-size: 200%;
font-size: 1.2rem;
color: #fff;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
margin: 1rem 0;
cursor: pointer;
transition: .5s;
}
.btn:hover {
background-position: right;
}
#media screen and (max-width: 1050px) {
.container {
grid-gap: 5rem;
}
}
#media screen and (max-width: 1000px) {
form {
width: 420px;
}
.login-content h2 {
font-size: 2.4rem;
margin: 8px 0;
margin-top: 5px;
}
#eye {
margin-left: 545px;
}
#eye2 {
margin-left: 545px;
}
}
#media screen and (max-width: 900px) {
.container {
grid-template-columns: 1fr;
}
.img {
display: none;
}
.wave {
display: none;
}
.login-content {
justify-content: center;
}
}
.login-content {
justify-content: center;
}
.text-danger {
position: fixed;
text-align: left;
margin: 0;
margin-top: 58;
font-size: 14px;
color: #e50914;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<script>
function Showfunction() {
var eye = document.getElementById("eye");
var eye2 = document.getElementById("eye2");
var pass = document.getElementById("pass");
if (pass.type === "password") {
pass.type = "text";
eye.style.display = "none";
eye2.style.display = "block";
} else {
pass.type = "password";
eye2.style.display = "none";
eye.style.display = "block";
}
}
function hiddenscript() {
var eye = document.getElementById("eye");
eye.style.display = "block";
}
</script>
<script>
$(document).ready(function() {
// set initially button state hidden
// use keyup event on email field
$("#email").keyup(function() {
if (validateEmail()) {
// if the email is validated
// set input email border green
$('#inputemail').css('border-bottom', 'solid 2px #38d39f').removeClass('error');
$('#iconmail').css('color', '#38d39f');
$("#emailMsg").html("<p class='text-danger'></p>");
$(':input[type="submit"]').prop('disabled', false);
// and set label
} else {
// if the email is not validated
// set border red
$('#inputemail').css('border-bottom', 'solid 2px #e50914').addClass('error');
$('#iconmail').css('color', '#e50914');
$("#emailMsg").html("<p class='text-danger'>Enter valid email.</p>");
$(':input[type="submit"]').prop('disabled', true);
}
});
$("#pass").keyup(function() {
// check
if (validatePassword()) {
// set input password border green
$('#inputpass').css('border-bottom', 'solid 2px #38d39f').removeClass('error');
$('#iconpass').css('color', '#38d39f');
$("#passMsg").html("<p class='text-danger'></p>");
$(':input[type="submit"]').prop('disabled', false);
//set passMsg
} else {
$('#inputpass').css('border-bottom', 'solid 2px #e50914').addClass('error');
$('#iconpass').css('color', '#e50914');
$("#passMsg").html("<p class='text-danger'>Password must contain at least 1 digit,<br>and need to contain at least 8 character.</p>");
$(':input[type="submit"]').prop('disabled', true);
}
});
$("#firstName").keyup(function() {
// check
if (validateFirstName()) {
// set input password border green
$('#inputfirstname').css('border-bottom', 'solid 2px #38d39f').removeClass('error');
$('#iconfirstname').css('color', '#38d39f');
$("#firstMsg").html("<p class='text-danger'></p>");
$(':input[type="submit"]').prop('disabled', false);
//set passMsg
} else {
$('#inputfirstname').css('border-bottom', 'solid 2px #e50914').addClass('error');
$('#iconfirstname').css('color', '#e50914');
$("#firstMsg").html("<p class='text-danger'>The first name must be at least 3 character long.</p>");
$(':input[type="submit"]').prop('disabled', true);
}
});
$("#lastName").keyup(function() {
// check
if (validateLastName()) {
// set input password border green
$('#inputlastname').css('border-bottom', 'solid 2px #38d39f').removeClass('error');
$('#iconlastname').css('color', '#38d39f');
$("#lastMsg").html("<p class='text-danger'></p>");
$(':input[type="submit"]').prop('disabled', false);
//set passMsg
} else {
$('#inputlastname').css('border-bottom', 'solid 2px #e50914').addClass('error');
$('#iconlastname').css('color', '#e50914');
$("#lastMsg").html("<p class='text-danger'>The last name must be at least 3 character long.</p>");
$(':input[type="submit"]').prop('disabled', true);
}
});
});
function validateEmail() {
// get value of input email
var email = $("#email").val();
// use reular expression
var reg = /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/
if (reg.test(email)) {
return true;
} else {
return false;
}
}
function validatePassword() {
var pass = $("#pass").val();
var reg = /^(?=.*\d)(?=.*[a-z])[0-9a-zA-Z]{8,}$/
if (reg.test(pass)) {
return true;
} else {
return false;
}
}
function validateFirstName() {
//get input password value
var first = $("#firstName").val();
// check it s length
if (first.length > 2) {
return true;
} else {
return false;
}
}
function validateLastName() {
//get input password value
var last = $("#lastName").val();
// check it s length
if (last.length > 2) {
return true;
} else {
return false;
}
}
</script>
<head>
<title>Animated Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="login-content">
<form method="POST">
<h2 class="title">Sign Up</h2>
<div class="input-div one" id="inputfirstname">
<div class="i">
<i class="fas fa-user" id="iconfirstname"></i>
</div>
<div class="div">
<h5>First Name</h5>
<input type="text" id="firstName" name="firstName" autocomplete="off" class="input" required>
<span id="firstMsg"></span>
</div>
</div>
<div class="input-div lastname" id="inputlastname">
<div class="i">
<i class="fas fa-user" id="iconlastname"></i>
</div>
<div class="div">
<h5>Last Name</h5>
<input type="text" id="lastName" name="lastName" autocomplete="off" class="input" required>
<span id="lastMsg"></span>
</div>
</div>
<div class="input-div email" id="inputemail">
<div class="i">
<i class="fas fa-envelope" id="iconmail"></i>
</div>
<div class="div">
<h5>Email address</h5>
<input type="email" id="email" name="email" autocomplete="off" class="input" required>
<span id="emailMsg"></span>
</div>
</div>
<div class="input-div pass2" id="inputpass">
<div class="i">
<i class="fas fa-lock" id="iconpass"></i>
<i class="fas fa-eye" id="eye" onclick="Showfunction()"></i>
<i class="fas fa-eye-slash" id="eye2" onclick="Showfunction()"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" name="password" autocomplete="off" class="input" maxlength="22" id="pass" oninput="hiddenscript()" required>
<span id="passMsg"></span>
</div>
</div>
Already have account? Login in!
<input type="submit" name="submitButton" class="btn" id="btSubmit" value="Sign Up">
<h6>By clicking “SIGN UP” you agree the Terms of Use and Privacy Policy.</h6>
</form>
</div>
</div>
<script type="text/javascript">
const inputs = document.querySelectorAll(".input");
function addcl() {
let parent = this.parentNode.parentNode;
parent.classList.add("focus");
}
function remcl() {
let parent = this.parentNode.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach(input => {
input.addEventListener("focus", addcl);
input.addEventListener("blur", remcl);
});
</script>
</body>
</html>

Change background color of selected div onclick not working?

I'm trying to make a form's selected element change its background color upon click. When the page initially loads the first option is selected. I'm trying to figure out what is wrong with the code I have, because it loads CORRECT when its viewed in our page editor (we're using wordpress & elementor to build our pages and running this as custom html code), but doesn't not load correctly on a "live" page.
I've researched for other methods of doing this without much success, and am especially confused considering the page works - but only when viewed as an admin inside a page editor (elementor).
https://jsfiddle.net/ncLk85mb/
function toggleClass(el) {
var kids = document.getElementById('menu1').children;
for (var i = 0; i < kids.length; i++) {
kids[i].className = "item";
}
el.className = "item highlight";
}
Above is the code I'm attempting to use to do the highlighting. I've pasted the entirety of what we've got so far into jsfiddle at the link above.

You don't need to add another function to add or remove highlight class. You already trigger click event on your div element so you have to just modify it like below -
$(".item").on('click', function() {
$('.item').removeClass('highlight');
$(this).addClass('highlight');
var item = $(this).find('input');
item.trigger("click");
if (item.prop("checked")) {
item.prop('checked', true);
} else {
item.prop('checked', false);
}
});
$("input:checkbox").on('click', function() {
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
$("input[name=submit]").on('click', function() {
var redirect = $('input[name="product"]:checked').val();
window.location.href = redirect;
});
/*Funnel Template - Step 2 - Order Form */
.main-panel {
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 20px;
margin-top: 20px;
min-height: 320px;
width: 100%;
}
.main-panel h2 {
font-size: 26px;
text-align: left;
margin: 0;
font-weight: bold;
}
.main-panel .item {
margin: 15.4px 0;
padding: 8px 0;
min-height: 60px;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.main-panel .item p {
margin: 0;
}
.main-panel .selection {
float: left;
width: 10%;
}
.main-panel .left-section {
float: left;
width: 46%;
}
.main-panel .right-section {
float: right;
width: 37%;
margin-left: 5%;
text-align: right;
}
.main-panel .item.highlight {
background-color: #ffc500;
z-index: 0;
border-radius: 5px;
}
.main-panel .item input[type='checkbox'] {
opacity: 0;
z-index: 2;
width: 18px;
height: 18px;
margin: 0;
}
.main-panel .item span::after {
opacity: 1;
z-index: 1;
content: "";
display: inline-block;
position: absolute;
width: 18px;
height: 18px;
left: 10px;
border: 2px solid #172969;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
line-height: 1.1em;
}
input[type="checkbox"]:checked+span:after {
font-family: 'FontAwesome';
content: "\f00c";
background-color: #172969;
color: #fff;
}
input[type=button] {
font-size: 18px;
font-weight: 600;
font-family: Noto Sans, sans-serif;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
text-transform: uppercase;
width: 100%;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-panel">
<form>
<h2 style="text-align:center;">CHOOSE YOUR PACKAGE!</h2>
<div id="menu1">
<div class="item highlight">
<div class="selection"><input type="checkbox" class="styled" name="product" value="#link1" checked="checked" /><span></span> </div>
<div class="left-section">
Option 1 A
</div>
<div class="right-section">
Option 1 B
</div>
</div>
<div class="item">
<div class="selection"> <input type="checkbox" name="product" value="link#2" /><span></span> </div>
<div class="left-section">
Option 1 A
</div>
<div class="right-section">
Option 1 B
</div>
</div>
<div class="item">
<div class="selection"> <input type="checkbox" name="product" value="#link3" /><span></span> </div>
<div class="left-section">
Option 1 A
</div>
<div class="right-section">
Option 1 B
</div>
</div>
<div class="item">
<div class="selection"> <input type="checkbox" name="product" value="#link4" /><span></span> </div>
<div class="left-section">
Option 1 A
</div>
<div class="right-section">
Option 1 B
</div>
</div>
</div>
<input type="button" name="submit" value="Click Now!" />
</form>
</div>
JSFiddle Link

Use setAttribute:
function toggleClass(el) {
var kids = document.getElementById('menu1').children;
for (var i = 0; i < kids.length; i++) {
kids[i].setAttribute("class", "item");
}
el.setAttribute("class", "item highlight");
}

Use element.classList.add() instead.
function toggleClass(el) {
var kids = document.getElementById('menu1').children;
for (var i = 0; i < kids.length; i++) {
kids[i].classList.add("item");
}
el.classList.add("item");
el.classList.add("highlight");
}

CSS select field and text position

I'm developing a multi-platform app using Ionic v1.
The problem is with CSS, this is the page that I want to perform in graphical purpose:
In particular I want to center vertically the input list in the red circle: I want to align them with the caption to the left.
I want also to center vertically the text in the second circle, aligning with the red button.
This is the html and CSS code of that page:
app.controller('Wallet_management_Ctrl',['$scope','$http','Lang', function($scope,$http,Lang) {
var binance = localStorage.getItem("binance");
binance = (binance) ? JSON.parse(binance) : [];
$scope.binance = binance;
var coinmarketcapsymbol = localStorage.getItem("Coinmarketcap");
coinmarketcapsymbol = (coinmarketcapsymbol) ? JSON.parse(coinmarketcapsymbol) : [];
$scope.coinmarketcapsymbol = coinmarketcapsymbol;
var symbolsBitfinex = localStorage.getItem("symbolsBitfinex");
symbolsBitfinex = (symbolsBitfinex) ? JSON.parse(symbolsBitfinex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsBitfinex = symbolsBitfinex;
var symbolsBittrex = localStorage.getItem("Bittrex");
symbolsBittrex = (symbolsBittrex) ? JSON.parse(symbolsBittrex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsBittrex = symbolsBittrex;
var symbolsPoloniex = localStorage.getItem("Poloniex");
symbolsPoloniex = (symbolsPoloniex) ? JSON.parse(symbolsPoloniex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsPoloniex = symbolsPoloniex;
var symbolsCryptopia = localStorage.getItem("Cryptopia");
symbolsCryptopia = (symbolsCryptopia) ? JSON.parse(symbolsCryptopia) : [];
//console.log(symbolsBitfinex);
$scope.symbolsCryptopia = symbolsCryptopia;
var language = Lang.getlang();
$scope.showlang = language;
if (language=="ita"){
$scope.title= "Gestione Wallet"
}
if (language=="en"){
$scope.title= "Wallet management"
}
var weblist = ["Binance","Bitfinex","Bitstamp","Bittrex", "Coinmarketcap","Cryptopia","Poloniex"];
var BitstampList = ["bch", "btc", "eth", "ltc", "xrp"];
$scope.weblist = weblist;
$scope.symbolsBitstamp = BitstampList;
var walletlist = localStorage.getItem("walletlist");
walletlist = (walletlist) ? JSON.parse(walletlist) : [];
// console.log(walletlist);
var item = [];
if (walletlist === null)
var walletlist = [];
$scope.walletlist = walletlist;
$scope.add = function() {
if($scope.site == null || $scope.currency == null || $scope.amount == null || $scope.price == null){
if (language=="ita"){
alert("Devi riempire tutti i campi");
};
if (language=="en"){
alert("Fill in all the labels");
};
}
else{
if ($scope.amount == 0 || $scope.price == 0){
if (language=="ita"){
alert("La quantità o il prezzo non possono essere nulli");
};
if (language=="en"){
alert("The amount or the price can't be null");
};
}
else{
item = [$scope.site,$scope.currency,$scope.amount, $scope.price];
walletlist.push(item);
window.localStorage.setItem("walletlist", JSON.stringify(walletlist));
$scope.site = null;
$scope.currency = null;
$scope.amount == null;
$scope.price == null;
}
}
};
$scope.delete = function(item) {
var index = walletlist.indexOf(item);
if (index > -1) {
walletlist.splice(index, 1);
}
window.localStorage.removeItem("walletlist");
window.localStorage.setItem("walletlist", JSON.stringify(walletlist));
//location.reload();
};
$scope.showBitfinex = function() {
if ($scope.site == "Bitfinex"){
return true;
}
else
return false;
};
$scope.showBinance = function() {
if ($scope.site == "Binance"){
return true;
}
else
return false;
};
$scope.showCoinmarketcap = function() {
if ($scope.site == "Coinmarketcap"){
return true;
}
else
return false;
};
$scope.showBittrex = function() {
if ($scope.site == "Bittrex"){
return true;
}
else
return false;
};
$scope.showPoloniex = function() {
if ($scope.site == "Poloniex"){
return true;
}
else
return false;
};
$scope.showCryptopia = function() {
if ($scope.site == "Cryptopia"){
return true;
}
else
return false;
};
$scope.showBitstamp = function() {
if ($scope.site == "Bitstamp"){
return true;
}
else
return false;
};
$scope.$on('$ionicView.leave', function() {
location.reload();
});
}]);
/* Empty. Add your own CSS if you like */
/* Utilities */
* {
font-family: 'Comfortaa';
}
.pane {
background-color: #E8EAF6;
}
/*menu laterale img in alto*/
.menu .bar.bar-header.expanded {
background-image: url('../img/menu.jpg');
background-size: 120%;
background-position: 0%;
transition: all .5s ease-in-out;
}
/*menu laterale img in alto*/
.menu.menu-left * {
background-color: #303F9F;
font-weight: bold;
font-family: 'Comfortaa';
font-size: 1.05em;
color: white;
}
.nav-bar-block,
.bar {
background-color: #303F9F !important;
font-family: 'Comfortaa';
font-weight: bold;
}
.link {
color: #116262;
font-weight: bold;
}
h4 {
color: #283593;
font-size: 1.875em;
margin-bottom: 16px;
}
h4:first-child {
border-top: none;
padding-top: initial;
}
h3 {
color: #283593;
font-size: 1.4em;
margin-bottom: 16px;
}
h3:first-child {
border-top: none;
padding-top: initial;
}
.title-bordered {
border-top: solid 2px #bbb;
padding-top: 30px;
}
p {
color: #555;
margin: 0 0 25px;
}
.no-border {
border: none;
}
.static {
position: static;
}
.bold {
font-weight: bold;
}
.border-top {
border-top: solid 1px #ccc;
padding-top: 30px;
}
.blue-grey-900 {
background-color: #263238 !important;
color: #fff;
}
/* Menu */
.menu.menu-left * {
font-weight: bold;
}
.item-radio input:checked~.item-content {
background: transparent;
}
.menu-open .ion-navicon {
transform: rotate(-360deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu-open .ion-navicon:before {
content: "\f2ca";
}
.item.item-radio .radio-icon {
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.item.item-radio:active .radio-icon {
opacity: 0;
transform: scale(1.6);
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.directions.button-bar {
margin: 0 auto;
width: 33.333%;
}
.directions.button-bar button {
line-height: 26px;
}
.ion-arrow-right-c.top-left:before {
transform: rotate(-135deg);
}
.ion-arrow-right-c.top-right:before {
transform: rotate(-45deg);
}
.ion-arrow-right-c.bottom-left:before {
transform: rotate(-225deg);
}
.ion-arrow-right-c.bottom-right:before {
transform: rotate(45deg);
}
#modal {
background-color: #ef4e3a;
border-radius: 100%;
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.2);
position: fixed;
height: 50%;
bottom: 0;
opacity: 0;
width: 700px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.expand #modal {
background-color: #DBDBDB;
border-radius: 0;
border-top: solid 4px #ef4e3a;
opacity: 1;
z-index: 9;
}
/* CODE */
.code {
color: #333;
font-family: monospace;
padding: 10px;
white-space: pre;
}
.code-wrapper {
padding-bottom: 30px;
padding-top: 15px;
}
.code-wrapper::before {
color: #1B5E20;
font-family: "Ionicons";
speak: none;
font-size: 18px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: '\f216 ';
}
.code-wrapper.active::before {
content: '\f207 ';
}
.code-wrapper .toggle {
color: #4CAF50;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: bold;
padding: 10px 8px;
text-decoration: underline;
}
.code-wrapper .code {
opacity: 0;
margin-top: -20px;
height: 0;
overflow: hidden;
position: absolute;
transition: 0.1s all ease-in-out;
z-index: 9999999999;
}
.code-wrapper.code-wrapper-last .code {
position: relative;
}
.code-wrapper.active .code {
background: #f9f9f9;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
left: 16px;
height: initial;
margin-top: 15px;
padding: 15px;
right: 16px;
opacity: 1;
transition: 0.3s all ease-in-out;
width: initial;
}
.popover {
left: initial !important;
right: 16px !important;
top: 16px !important;
}
.platform-android .popover {
margin-top: 10px;
}
.color-green {
color: green;
}
.color-blue {
color: blue;
}
.color-red {
color: red;
}
div.relative {
position: relative;
left: -30px;
}
.round-button {
width: 25%;
}
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
border: 10px solid #cfdcec;
overflow: hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background: #30588e;
}
.round-button a {
display: block;
float: left;
width: 100%;
padding-top: 50%;
padding-bottom: 50%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #e2eaf3;
font-family: Verdana;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
}
/* SlideShow */
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
/* Select styles */
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background: #fff;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
#media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<ion-view ng-model="title" view-title={{title}}>
<ion-content ng-controller="Wallet_management_Ctrl">
<br /><br /><br />
<label class="item item-input notIE item-select">
<div ng-if="showlang == 'en'" class="input-label" ng-model="weblist">Site</div>
<div ng-if="showlang == 'ita'" class="input-label" ng-model="weblist">Sito</div>
<select ng-model ="site">
<option ng-repeat="item in weblist" >{{item}}</option>
</select>
</label>
<label class="item item-input item-select">
<div ng-if="showlang == 'en'" class="input-label" >Currency</div>
<div ng-if="showlang == 'ita'" class="input-label" >Valuta</div>
<select ng-model="currency" >
<option ng-if = "showBitfinex()" ng-repeat="item in symbolsBitfinex" >{{item}}</option>
<option ng-if = "showBinance()" ng-repeat="item in binance" >{{item}}</option>
<option ng-if = "showCoinmarketcap()" ng-repeat="item in coinmarketcapsymbol" >{{item.symbol}}</option>
<option ng-if = "showBittrex()" ng-repeat="item in symbolsBittrex" >{{item}}</option>
<option ng-if = "showPoloniex()" ng-repeat="item in symbolsPoloniex" >{{item}}</option>
<option ng-if = "showCryptopia()" ng-repeat="item in symbolsCryptopia" >{{item}}</option>
<option ng-if = "showBitstamp()" ng-repeat="item in symbolsBitstamp" >{{item}}</option>
</select>
</label>
<div class="list">
<label class="item item-input">
<span ng-show="showlang == 'en'" class="input-label">Amount</span>
<span ng-show="showlang == 'ita'" class="input-label">Quantità</span>
<input ng-show="showlang == 'en'" type="number" placeholder="Amount" min="0" ng-model="amount">
<input ng-show="showlang == 'ita'" type="number" placeholder="Quantità" min="0" ng-model="amount">
</label>
</div>
<div class="list">
<label class="item item-input">
<span ng-show="showlang == 'en'" class="input-label">Price in $ </span>
<span ng-show="showlang == 'ita'" class="input-label">Prezzo in $ </span>
<input ng-show="showlang == 'en'" type="number" step="0.01" placeholder="Price in $" min="0" ng-model="price">
<input ng-show="showlang == 'ita'" type="number" step="0.01" placeholder="Prezzo in $" min="0" ng-model="price">
</label>
</div>
<div class="col text-center">
<button ng-show="showlang == 'en'" class="button button-block button-positive" ng-click="add()">Add</button>
<button ng-show="showlang == 'ita'" class="button button-block button-positive" ng-click="add()">Aggiungi</button>
</div>
<ion-item-group>
<ion-divider color=#9FA8DA>
<ion-item ng-if="showlang == 'en'" class="row">
<h3 class="col" align="center">Site</h3>
<h3 class="col" align="center">Currency</h3>
<h3 class="col" align="center">Amount</h3>
<h3 class="col" align="center">Purch. P. </h3>
<h3 class="col" align="center"></h3>
</ion-item>
<ion-item ng-if="showlang == 'ita'" class="row">
<h3></h3>
<h3 class="col" align="center">Sito</h3>
<h3 class="col" align="center">Valuta</h3>
<h3 class="col" align="center">Qnt.</h3>
<h3 class="col" align="center">P. Acq. </h3>
<h3 class="col" align="center"></h3>
</ion-item>
<ion-item class="row" ng-model="walletlist" ng-repeat="item in walletlist">
<div class="col" align="center">{{item[0]}} </div>
<div class="col" align="center">{{item[1]}} </div>
<div class="col" align="center">{{item[2]}} </div>
<div class="col" align="center">{{item[3]}} </div>
<div class="col" align="center"><button class="button button-assertive button-small, ion-ios-trash" ng-click="delete(item)"></button></div>
</ion-item>
</ion-divider>
</ion-item-group>
</ion-content>
</ion-view>
A think that I should modify CSS file, but I don't know how I can do! I tried with some similar mistakes solved, but I didn't solve the problem