I am building a multi-stage form in vanilla HTML/CSS/JS and bootstrap.
I would like assistance amending my codepen so that:
On the first step/tab, the previous button is not displayed. Currently, it appears if you press the previous button and return to the first page.
On the final step/tab, a submit button is dynamically added and replaces the next button (which is redundant on this final step).
Make the placeholder styling in the textarea go to the top of the box (not center as it is now).
The styling is wrong on the codepen as it hasn't come through properly, but it is functional nonetheless so it doesn't matter for the purposes of these questions.
Codepen is here:
https://codepen.io/trusaiyan/pen/eYLOaja
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PAGE</title>
<!-- font awesome cdn link -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- BOOTSTRAP cdn link -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#7/swiper-bundle.min.css"
/>
<!-- custom css file link -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- header section starts -->
<header class="header">
<nav id="navbar" class="nav">
<img src="images/logo2.png" alt="" />
</nav>
</header>
<!-- END NAV -->
<main>
<!-- START CARD -->
<div class="card-container">
<div class="card-header pa-5">
<h1>DEMO SURVEY</h1>
</div>
<div class="card-progress">
<div class="progress">
<div
class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
aria-valuenow="1"
aria-valuemin="0"
aria-valuemax="7"
style="width: 0%"
id="progress"
></div>
</div>
<p class="progress-text">
Step <span id="tabNo">1</span> of <span>7</span>
</p>
</div>
<div class="card-content pa-5">
<h2 id="title">YOUR DETAILS</h2>
<p id="description">Please enter your details</p>
<form action="">
<div class="page active-page" id="page1">
<div class="form-inputs-text">
<div class="columns">
<label for="firstName">First Name</label> <br />
<input
type="text"
id="firstName"
name="firstName"
placeholder="Enter first name"
/>
</div>
<div class="columns">
<label for="lastName">Last Name</label> <br />
<input
type="text"
id="lastName"
name="lastName"
placeholder="Enter last name"
/>
</div>
</div>
<div class="form-inputs-text">
<div class="columns">
<label for="emailAddress">Email</label> <br />
<input
type="email"
id="emailAddress"
name="emailAddress"
placeholder="Enter email address"
/>
</div>
<div class="columns">
<label for="position">Position</label> <br />
<input
type="text"
id="position"
name="position"
placeholder="Enter position"
/>
</div>
</div>
<div class="form-inputs-text">
<div class="columns">
<label for="Title">Title</label> <br />
<input
type="text"
id="title"
name="title"
placeholder="Enter title"
/>
</div>
<div class="columns">
<label for="phoneNumber">Phone Number</label> <br />
<input
type="tel"
id="phoneNumber"
name="phoneNumber"
placeholder="Enter phone number"
/>
</div>
</div>
<div class="form-inputs-text">
<div class="columns">
<label for="country">Country</label> <br />
<select name="country" id="country">
<option value="Albania">Albania</option>
<option value="Andorra">Andorra</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Belgium">Belgium</option>
<option value="Bosnia and Herzegovina">
Bosnia & Herzegovina
</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Canada">Canada</option>
<option value="Croatia">Croatia</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Estonia">Estonia</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Latvia">Latvia</option>
form-group
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macedonia, The Former Yugoslav Republic of">
North Macedonia
</option>
<option value="Malta">Malta</option>
<option value="Moldova, Republic of">Moldova</option>
<option value="Montenegro">Montenegro</option>
<option value="Netherlands">Netherlands</option>
<option value="Norway">Norway</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Romania">Romania</option>
<option value="Serbia">Serbia</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Spain">Spain</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="columns">
<label for="company">Company</label> <br />
<input
type="tel"
id="company"
name="company"
placeholder="Enter company name"
/>
</div>
</div>
<div class="form-inputs-text">
<div class="columns">
<label for="Title">Company Website</label> <br />
<input
type="text"
id="website"
name="title"
placeholder="Enter website URL"
/>
</div>
</div>
</div>
<div class="page" id="page2">
<div class="input-labels-radio">
<label for="rating">Very poor</label>
<label for="rating">Poor</label>
<label for="rating">OK</label>
<label for="rating">Good</label>
<label for="rating">Very good</label>
</div>
<div class="form-inputs-radio">
<input type="radio" id="rating1" name="rating" />
<input type="radio" id="rating2" name="rating" />
<input type="radio" id="rating3" name="rating" />
<input type="radio" id="rating4" name="rating" />
<input type="radio" id="rating5" name="rating" />
</div>
</div>
<div class="page" id="page3">
<div class="input-labels-radio">
<label for="rating">Very unclear</label>
<label for="rating">Unclear</label>
<label for="rating">Acceptable</label>
<label for="rating">Clear</label>
<label for="rating">Very clear</label>
</div>
<div class="form-inputs-radio">
<input type="radio" id="rating1" name="rating" />
<input type="radio" id="rating2" name="rating" />
<input type="radio" id="rating3" name="rating" />
<input type="radio" id="rating4" name="rating" />
<input type="radio" id="rating5" name="rating" />
</div>
</div>
<div class="page" id="page4">
<div class="input-labels-radio">
<label for="rating">Very easy</label>
<label for="rating">Easy</label>
<label for="rating">OK</label>
<label for="rating">Difficult</label>
<label for="rating">Very difficult</label>
</div>
<div class="form-inputs-radio">
<input type="radio" id="rating1" name="rating" />
<input type="radio" id="rating2" name="rating" />
<input type="radio" id="rating3" name="rating" />
<input type="radio" id="rating4" name="rating" />
<input type="radio" id="rating5" name="rating" />
</div>
</div>
<div class="page" id="page5">
<div class="form-inputs-text">
<!-- <label for="Title">Input</label> <br /> -->
<input
type="text"
id="message"
name="message"
placeholder="Enter your text here"
/>
</div>
</div>
<div class="page" id="page6">
<div class="input-labels-radio">
<label for="rating">Very poor</label>
<label for="rating">Quite poor</label>
<label for="rating">Acceptable</label>
<label for="rating">Good</label>
<label for="rating">Extremely good</label>
</div>
<div class="form-inputs-radio">
<input type="radio" id="rating1" name="rating" />
<input type="radio" id="rating2" name="rating" />
<input type="radio" id="rating3" name="rating" />
<input type="radio" id="rating4" name="rating" />
<input type="radio" id="rating5" name="rating" />
</div>
</div>
<div class="page" id="page7">
<div class="input-labels-radio">
<label for="rating">Very poor</label>
<label for="rating">Quite poor</label>
<label for="rating">Acceptable</label>
<label for="rating">Good</label>
<label for="rating">Extremely good</label>
</div>
<div class="form-inputs-radio">
<input type="radio" id="rating1" name="rating" />
<input type="radio" id="rating2" name="rating" />
<input type="radio" id="rating3" name="rating" />
<input type="radio" id="rating4" name="rating" />
<input type="radio" id="rating5" name="rating" />
</div>
</div>
</form>
</div>
<div class="card-actions pa-5">
<!-- <p>You have spent 2 mins doing this form</p> -->
<div>
<button onclick="prevTab()" class="btn btn-primary" id="prevBtn">
Previous
</button>
<button onclick="nextTab()" class="btn btn-primary" id="nextBtn">
Next
</button>
</div>
</div>
</div>
</main>
<!-- footer section ends -->
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<!-- custom js file link -->
<script src="js/script.js"></script>
</body>
</html>
const info = [
{
title: "YOUR DETAILS",
description: "Please enter your details",
},
{
title: "SYSTEM CHECK",
description: "How was the overall System Check experience?",
},
{
title: "SYSTEM CHECK",
description: "How clear were the System Check instructions?",
},
{
title: "SYSTEM CHECK",
description: "How easy to complete were the System Check steps?",
},
{
title: "SYSTEM CHECK",
description:
"Did you have any issues during the System Check? If yes, please state below:",
},
{
title: "SYSTEM CHECK",
description: "How effective do you think the environment checks were?",
},
{
title: "SYSTEM CHECK",
description: "How user-friendly was the System Check user interface?",
},
];
let index = 0;
let currentTab = 1;
const prevBtn = document.querySelector("#prevBtn");
const nextBtn = document.querySelector("#nextBtn");
document.querySelector("#prevBtn").style.display = "none";
//nextTab function for clicking the button (with onclick on button)
function nextTab() {
if (currentTab == 1) {
//select the h2 and p tags innerhtml and set it to the info arrays currentab's h2 or p tag
document.querySelector("#title").innerHTML = info[currentTab].title;
document.querySelector("#description").innerHTML =
info[currentTab].description;
//select the first 2 pages set the active-page class
document.querySelector("#page1").classList.remove("active-page");
document.querySelector("#page2").classList.add("active-page");
document.querySelector("#prevBtn").style.display = "inline-block";
//increase the tab number each time after doing this codeblock
currentTab++;
//set the tab number span display to the currenttab number
document.querySelector("#tabNo").innerHTML = currentTab;
let progress = document.querySelector("#progress");
progress.setAttribute("aria-valuenow", currentTab);
progress.setAttribute("style", `width: ${14.3}%`);
} else {
document.querySelector("#title").innerHTML = info[currentTab].title;
document.querySelector("#description").innerHTML =
info[currentTab].description;
document
.querySelector(`#page${currentTab}`)
.classList.remove("active-page");
document
.querySelector(`#page${currentTab + 1}`)
.classList.add("active-page");
currentTab++;
document.querySelector("#tabNo").innerHTML = currentTab;
let progress = document.querySelector("#progress");
progress.setAttribute("aria-valuenow", currentTab);
progress.setAttribute("style", `width: ${currentTab * 14.3}%`);
}
}
function prevTab() {
if (currentTab != 1) {
document.querySelector("#title").innerHTML = info[currentTab].title;
document.querySelector("#description").innerHTML =
info[currentTab].description;
document
.querySelector(`#page${currentTab}`)
.classList.remove("active-page");
document
.querySelector(`#page${currentTab - 1}`)
.classList.add("active-page");
currentTab--;
document.querySelector("#tabNo").innerHTML = currentTab;
let progress = document.querySelector("#progress");
progress.setAttribute("aria-valuenow", currentTab);
progress.setAttribute("style", `width: ${currentTab * 14.3}%`);
}
}
/*=============== GOOGLE FONTS ===============*/
#import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto:ital,wght#0,100;0,300;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
/*========== COLOURS ==========*/
/*Color mode HSL(hue, saturation, lightness)*/
--white: #fff;
--trans: all 0.3s ease-in-out;
/*========== FONT + TYPOGRAPHY ==========*/
/*.5rem = 8px | 1rem = 16px ...*/
--body-font: "Poppins", sans-serif;
--big-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: 0.938rem;
--small-font-size: 0.813rem;
--smaller-font-size: 0.75rem;
--slightly-large: 1.475rem;
/*========== FONT WEIGHT ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== MARGINES BOTTOM ==========*/
/*.5rem = 8px | 1rem = 16px ...*/
--mb-0-5: 0.5rem;
--mb-0-75: 0.75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
/*========== Z INDEX ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
/* RESPONSIVE TYPOGRAPHY */
#media screen and (min-width: 968px) {
:root {
--big-font-size: 3.5rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: 0.875rem;
--smaller-font-size: 0.813rem;
}
}
/*=============== BASE ===============*/
/* Custom properties/variables */
:root {
--main-white: #fff;
--main-blue: lightblue;
--main-red: #7d4561;
--main-gray: #000000;
}
/* Base reset */
* {
margin: 0;
padding: 0;
}
/* box-sizing and font sizing */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
scroll-behavior: smooth;
}
/* 1200px / 16px = 75em */
#media (max-width: 75em) {
html {
font-size: 60%;
}
}
/* 980px / 16px = 61.25em */
#media (max-width: 61.25em) {
html {
font-size: 58%;
}
}
/* 460px / 16px = 28.75em */
#media (max-width: 28.75em) {
html {
font-size: 55%;
}
}
/*=============== BASE ===============*/
body {
font-family: "Poppins", sans-serif;
font-size: 1.8rem; /* 18px */
font-weight: 400;
line-height: 1.4;
color: var(--main-black);
}
/*=============== NAV ===============*/
.nav {
display: flex;
width: 100%;
/*background: var(--main-blue);*/
/*box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);*/
}
.nav img {
width: 250px;
padding: 5px;
margin-left: 20px;
}
#media (max-width: 28.75em) {
}
/*=============== CARD SECTION ===============*/
main {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}
.card-container {
/*box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
/*box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
rgba(0, 0, 0, 0.07) 0px 16px 16px;
margin: 0 auto;
width: 600px;
border-radius: 2rem;
overflow-x: hidden;
}
.card-header {
background: rgb(131, 58, 180);
background: linear-gradient(
90deg,
rgba(131, 58, 180, 1) 0%,
rgba(234, 91, 12, 1) 50%,
rgba(252, 176, 69, 1) 100%
);
padding: 50px;
color: white;
}
.card-content h2,
.card-content p {
padding-bottom: 15px;
}
.card-content h2 {
font-weight: bold;
}
.progress {
border-radius: 0px;
}
.progress-text {
padding-left: 25px;
padding-top: 10px;
}
.pa-5 {
padding: 25px;
}
form {
margin-right: ;
}
.card-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.card-actions p {
font-size: var(--h3-font-size);
margin-right: 10px;
}
.card-actions button {
width: 12rem;
height: 3rem;
margin: 0.5rem;
font-size: var(--h2-font-size);
letter-spacing: 1px;
border-radius: 3rem;
}
.card-actions button:hover {
transform: scale(1.04);
transition: 0.2s ease-out;
}
/*=============== CARD TABS ===============*/
.page {
display: none;
}
.active-page {
display: block !important;
}
.columns {
margin: 5px 0px;
}
.input-labels-radio {
display: flex;
justify-content: space-around;
padding-bottom: 10px;
font-size: var(--slightly-large);
}
.form-inputs-radio {
display: flex;
justify-content: space-around;
}
.form-inputs-text {
display: flex;
justify-content: space-between;
}
input[type="text"] {
border: 1px solid rgb(126, 125, 125);
margin-bottom: 1rem;
margin-top: 0.5rem;
padding: 2px;
border-radius: 3rem;
background-color: #e9ecef;
}
input[type="radio"] {
transform: scale(1.75);
cursor: pointer;
}
input[type="tel"] {
margin-bottom: 1rem;
margin-top: 0.5rem;
padding: 2px;
border-radius: 3rem;
background-color: #e9ecef;
}
input[type="email"] {
border: 1px solid rgb(126, 125, 125);
margin-bottom: 1rem;
margin-top: 0.5rem;
padding: 2px;
border-radius: 3rem;
background-color: #e9ecef;
}
input[type="email"]:focus {
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
input {
padding-left: 10px !important;
}
input[type="radio"]:hover {
transform: scale(2);
transition: 0.2s ease-out;
}
select[name="country"] {
border-radius: 3rem;
border: 1px solid rgb(126, 125, 125);
margin-bottom: 1rem;
margin-top: 0.5rem;
padding: 2px;
background-color: #e9ecef;
}
label {
font-weight: 600;
}
#message{
width: 100%;
height: 200px;
max-height: 350px;
overflow-x: hidden;
overflow-y: auto;
}
Thanks
I've tried various methods but unsure on the correct way to do this, so any help appreciated.
I have a form that has two checkboxes, now you can click the checkbox on both
The question is, is it possible to make it so that there is only one choice? For example, clicked on the first one, it turned on, clicked on the second one, the first turned off, the second turned on. It should also be possible to uncheck the box at any time. I know that I can use the radio type, but I need only checkboxes
.call-form-item {
padding-bottom: 12px;
margin-bottom: 24px;
margin-left: 50px;
margin-right: 50px;
}
input {
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
background-color: #EEF0F7;
margin-right: 10px;
}
.input-wrapper {
display: flex;
align-items: flex-start;
}
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
margin-right: 10px;
}
input[type=checkbox]:focus {
outline: rgba(0, 0, 0, 0.2);
}
input[type=checkbox] {
background-color: #EEF0F7;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 17px;
height: 17px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked {
background-color: #808694;
background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-contacts-call') }}">
<div class="col-md-6">
<div class="call-form-item">
<label for="name">Name *</label>
<div class="input-wrapper">
<input class="js-form-call-name" id="name" type="text" name="name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<label for="email">Email *</label>
<div class="input-wrapper">
<input class="js-form-call-email" id="email" type="email" name="email">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<div class="input-wrapper">
<input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
<input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
</div>
</div>
</div>
</form>
</div>
The script would loo something like this. I didn't test this so there might be misspellings causing errors and such.
// get first checkbox element
let box1 = document.getElementByID( "check1" );
// get second checkbox element
let box2 = document.getElementByID( "check2" );
// add events that fires when boxes are checked
box1.addEventListener( "change", function() {
// see if the other box is already checked
if ( box2.checked ) {
// if so, uncheck it
box2.checked = false;
}
});
box2.addEventListener( "change", function() {
if ( box1.checked ) {
box1.checked = false;
}
});
But you can also just use radio buttons and invoke a hidden reset button when you click a checked radio button I think.
Here is another version that will work with any number of checkboxes.
const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
inps.forEach(c=>{if(c!==e) c.checked=false})
}))
.call-form-item {
padding-bottom: 12px;
margin-bottom: 24px;
margin-left: 50px;
margin-right: 50px;
}
input {
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
background-color: #EEF0F7;
margin-right: 10px;
}
.input-wrapper {
display: flex;
align-items: flex-start;
}
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
margin-right: 10px;
}
input[type=checkbox]:focus {
outline: rgba(0, 0, 0, 0.2);
}
input[type=checkbox] {
background-color: #EEF0F7;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 17px;
height: 17px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked {
background-color: #808694;
background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-contacts-call') }}">
<div class="col-md-6">
<div class="call-form-item">
<label for="name">Name *</label>
<div class="input-wrapper">
<input class="js-form-call-name" id="name" type="text" name="name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<label for="email">Email *</label>
<div class="input-wrapper">
<input class="js-form-call-email" id="email" type="email" name="email">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<div class="input-wrapper">
<input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
<input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
</div>
</div>
</div>
</form>
</div>
And here is an alternative, using radio buttons:
const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
e.checked=e!==inps.last;
inps.last=e.checked?e:null
}))
<div class="input-wrapper">
<label><input name="radio" value="1" type="radio">Check 1</label>
<label><input name="radio" value="2" type="radio">Check 2</label>
<label><input name="radio" value="3" type="radio">Check 3</label>
</div>
Alternate solution:
HTML:
<section>
<label><input type="checkbox" value="CBox 1"> CBox 1</label>
<label><input type="checkbox" value="CBox 2"> CBox 2</label>
<label><input type="checkbox" value="CBox 3"> CBox 3</label>
<label><input type="checkbox" value="CBox 4"> CBox 4</label>
<label><input type="checkbox" value="CBox 5"> CBox 5</label>
</section>
<p> Checkbox acts like a radio button, but can be reset </p>
Javascript:
const sel = document.querySelectorAll('section input[type="checkbox"]');
for (el of sel) {
el.addEventListener('click',
function(e) { sel.forEach( (x) => { if (e.currentTarget != x) x.checked = false; } ); }
);
};
You can use JavaScript / jQuery for it. If check1 is active, just disable check2.
See change event and disabled
I have a problem. I created the following topbar:
#topBar {
height: 30px;
margin-top: 10px;
}
#comboBoxAgent {
width: 400px;
height: 100%;
}
#comboBoxCoin1 {
min-width: 60px;
height: 100%;
}
#comboBoxCoin2 {
min-width: 60px;
height: 100%;
}
#btnToggleAgent {
float: right;
height: 100%;
min-width: 60px;
width: 70px;
border-radius: 10px;
font-size: 18px;
color: white;
}
#toggleSwitch {
height: 100%;
display: inline-block;
}
#txtStartDateTime {
margin-left: 10px;
}
.simulator-progress {
font-weight: bold;
}
#media only screen and (max-width: 1100px) {
#comboBoxCoin2 {
display: none;
}
}
#maxOrders {
padding: 5px 0px;
}
.txtOrderRadioBtn {
padding: 0px;
margin: 0px;
display: inline-block;
}
#maxOrdersBtn {
padding: 0px;
margin: 0px;
display: inline-block;
}
<div id="topBar">
<select id="comboBoxAgent" onchange="changeAgent()"></select>
<select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<div id="toggleSwitch">
<div class="radio-group">
<input type="radio" id="environmentReal" name="environment" checked="checked" value="Real"><label for="option-one">Real</label>
<input type="radio" id="environmentSim" name="environment" value="Simulator"><label for="option-two">Sim</label>
</div>
</div>
<div id="simulatorControls" style="display: none;">
<input type="text" id="txtStartDateTime" placeholder="Start (0000-00-00 00:00:00)">
<button id="btnToggleSimulator" onClick="toggleSimulator()"></button>
<label id="txtSimulatorProgress" class="simulator-progress"></label>
</div>
<button id="btnToggleAgent" onClick="toggleAgent()"></button>
</div>
<div id="maxOrders">
<label class="txtOrderRadioBtn">Max visible orders</label>
<form id="maxOrdersBtn">
<label class="radio-inline">
<input type="radio" value="50" name="maxOrderOption" checked>50
</label>
<label class="radio-inline">
<input type="radio" value="100" name="maxOrderOption">100
</label>
<label class="radio-inline">
<input type="radio" value="250" name="maxOrderOption">250
</label>
<label class="radio-inline">
<input type="radio" value="All" name="maxOrderOption">All
</label>
</form>
</div>
The snippet isn't working properly, but I think thats just because its a snippet. The point is, that when I click on the radio button "Sim" the input field with the datetime shows up. Now this works properly on desktop, but on my mobile device the input field goes trough the maxOrders div. Here is an image of the mobile result:
Now how can I fix this using media queries. There are a few things that are important for the solution. The <button id="btnToggleAgent" onClick="toggleAgent()"></button> has to stay in the top right corner and the maxOrders needs to be below the simulator datetime input field on mobile. Please let me know how I can fix this!
I would do two things: Eliminate as many hard-coded widths as you can. The modern web should be flexible. Eliminate floats. They're a pain, and there are better ways (such as flexbox).
Other tips:
Use styling classes instead of IDs. This makes them reusable and forces you to consider how to simplify.
Apply padding and spacing globally, rather than in one-offs. Use generic classes or a small library.
#topBar {
height: 30px;
margin-top: 10px;
display: flex;
align-items: stretch;
}
#comboBoxAgent {
flex: auto;
}
.comboBoxCoin1 {
min-width: 60px;
}
#btnToggleAgent {
min-width: 60px;
width: 70px;
border-radius: 10px;
font-size: 18px;
color: white;
}
.simulator-progress {
font-weight: bold;
}
#media only screen and (max-width: 1100px) {
#comboBoxCoin2 {
display: none;
}
}
#maxOrders {
padding: 5px 0px;
}
.txtOrderRadioBtn {
padding: 0px;
margin: 0px;
}
#maxOrdersBtn {
padding: 0px;
margin: 0px;
}
<div id="topBar">
<select id="comboBoxAgent" onchange="changeAgent()"></select>
<select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<div id="toggleSwitch">
<div class="radio-group">
<input type="radio" id="environmentReal" name="environment" checked="checked" value="Real"><label for="option-one">Real</label>
<input type="radio" id="environmentSim" name="environment" value="Simulator"> <label for="option-two">Sim</label>
</div>
</div>
<div id="simulatorControls" style="display: none;">
<input type="text" id="txtStartDateTime" placeholder="Start (0000-00-00 00:00:00)">
<button id="btnToggleSimulator" onClick="toggleSimulator()"></button>
<label id="txtSimulatorProgress" class="simulator-progress"></label>
</div>
<button id="btnToggleAgent" onClick="toggleAgent()"></button>
</div>
<div id="maxOrders">
<label class="txtOrderRadioBtn">Max visible orders</label>
<form id="maxOrdersBtn">
<label class="radio-inline">
<input type="radio" value="50" name="maxOrderOption" checked>50
</label>
<label class="radio-inline">
<input type="radio" value="100" name="maxOrderOption">100
</label>
<label class="radio-inline">
<input type="radio" value="250" name="maxOrderOption">250
</label>
<label class="radio-inline">
<input type="radio" value="All" name="maxOrderOption">All
</label>
</form>
</div>
When "same as shipping address" is checked, the form below that section is supposed to disappear. I put {display:none} but it doesn't work. It worked when I got rid of {div class="checkboxalign} but then it is no longer aligned in the center. I was wondering how to get this function to work, but still keep it center aligned? Thank you.
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.checkbox-custom:checked ~.input-box {
display: none;
}
.checkboxalign {
margin: 0 auto;
width: auto;
text-align: left;
display: table;
margin-bottom: 10px;
}
.radioalign {
margin: 0 auto;
width: auto;
text-align: left;
display: table;
}
<form class="form2">
<div class="h6centeralign"><h6 class="h6style">Billing Address</h6></div>
<div class="checkboxalign">
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form3">
<div class="h6centeralign"><h6 class="h6style">Shipping Method</h6></div>
<div class="radioalign">
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
<label for="radio-1" class="radio-custom-label">Free Delivery (3-5 Days)<strong> $0.00</strong></label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group" type="radio">
<label for="radio-2" class="radio-custom-label">Standard Delivery (2-3 Days)<strong> $5.99</strong></label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio">
<label for="radio-3" class="radio-custom-label">Next Day Delivery<strong> $12.99</strong></label>
</div>
</div>
</form>
Because .input-box Elements are not siblings of the checkbox. And your selector is
.checkbox-custom:checked ~.input-box {
display: none;
}
There must be wrapper div to form elements which you want to hide then your css will work.
I want to change the styling of a dropdown with check boxes using only CSS and javascript. I have added a picture of what I am trying to make when the button is pressed.. It would be nice if I could make a focus to the selected check box just like the grey container at the first checkbox
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;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Group</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" /> Boiler
</label>
<label for="two">
<input type="checkbox" id="two" /> Engine
</label>
<label for="three">
<input type="checkbox" id="three" /> Fan
</label>
<label for="one">
<input type="checkbox" id="four" /> Location
</label>
<label for="two">
<input type="checkbox" id="five" /> Ship
</label>
<label for="three">
<input type="checkbox" id="six" /> Valmarine
</label>
<label for="three">
<input type="checkbox" id="seven" /> Voyage</label>
</div>
</div>
</form>
For example I want to change the color of the dropdown button, the color of the box with the arrow on the right of the dropbox, the color of the checkboxes (dark grey) etc..
I am trying to make it as simple as possible using only CSS and javascript.
You can get pretty far on css alone. Most of the trick here is using a pseudo element on checkbox to represent selected state.
No html and js changes in this solution.
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;
}
}
* {
box-sizing: border-box;
}
body {
background: #0b4a79;
}
input[type="checkbox"]:checked::after {
border: 1px solid #a8a8a8;
background: #dadada;
background: linear-gradient(to bottom, #f0f0f0 0%, #c5c5c5 100%);
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: -10;
border-radius: 2px;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
background: #0000;
border: none;
border-radius: 2px;
background: linear-gradient(to bottom, #c9dde8 0%, #86b3cc 100%);
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
background-color: #103c5d;
display: none;
border: 1px #dadada solid;
margin: 5px 0 0 0;
border-radius: 3px;
}
#checkboxes label {
display: block;
font-family: Helvetica, Arial, sans-serif;
margin: 4px;
padding: 3px 2px;
position: relative;
color: #ffffff;
background: rgba(0, 0, 0, 0);
z-index: 1;
}
#checkboxes label:hover {
background-color: #1e90ff;
border-radius: 2px;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Group</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" /> Boiler
</label>
<label for="two">
<input type="checkbox" id="two" /> Engine
</label>
<label for="three">
<input type="checkbox" id="three" /> Fan
</label>
<label for="one">
<input type="checkbox" id="four" /> Location
</label>
<label for="two">
<input type="checkbox" id="five" /> Ship
</label>
<label for="three">
<input type="checkbox" id="six" /> Valmarine
</label>
<label for="three">
<input type="checkbox" id="seven" /> Voyage</label>
</div>
</div>
</form>
To highlight the label you can go with something like mentioned in this post from #dfsq and add/remove a special class to your label on the click-event.
// get all your inputs within "#checkboxes label"
var checkedInput = document.querySelectorAll('#checkboxes label > input');
// loop over your inputs, by on change of your input (checked/unchecked)
// toggle the css class for the closest "label"
Array.from(checkedInput ).forEach(input => {
input.addEventListener('change', function(event) {
this.closest("label").classList.toggle("with-focus");
});
});
You can style then the new class
#checkboxes label.with-focus {
display: block;
background-color: #eee;
border-radius: 2px;
}
I've changed your snippet with this:
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;
}
}
// get all your inputs within "#checkboxes label"
var checkedInput = document.querySelectorAll('#checkboxes label > input');
// loop over your inputs, by on change of your input (checked/unchecked)
// toggle the css class for the closest "label"
Array.from(checkedInput ).forEach(input => {
input.addEventListener('change', function(event) {
this.closest("label").classList.toggle("with-focus");
});
});
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
padding: 5px;
background-color: #103c5d;
}
#checkboxes label {
display: block;
}
#checkboxes label.with-focus {
display: block;
background-color: #eee;
border-radius: 2px;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Group</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" /> Boiler
</label>
<label for="two">
<input type="checkbox" id="two" /> Engine
</label>
<label for="three">
<input type="checkbox" id="three" /> Fan
</label>
<label for="one">
<input type="checkbox" id="four" /> Location
</label>
<label for="two">
<input type="checkbox" id="five" /> Ship
</label>
<label for="three">
<input type="checkbox" id="six" /> Valmarine
</label>
<label for="three">
<input type="checkbox" id="seven" /> Voyage</label>
</div>
</div>
</form>
For all the other CSS stuff you should probably dig around, thats not as hard as its sounds ;)