* { box-sizing: border-box; }

#regForm { background-color: #ffffff; margin: 0px auto; font-family: Oswald; padding: 10px; width: 100%; min-width: 300px; }

input { padding: 10px; font-size: 17px; font-family: Oswald; border: 1px solid #aaaaaa; cursor: pointer; }

/* Mark input boxes that gets an error on validation: */ input.invalid { background-color: #ffdddd; }

/* Hide all steps by default: */ .tab { display: none; }

button { background-color: #4c81af; color: #ffffff; border: none; padding: 10px 20px; font-size: 17px; font-family: Oswald; cursor: pointer; }

button:hover { opacity: 0.8; }

#prevBtn { background-color: #bbbbbb; }

/* Make circles that indicate the steps of the form: */ .step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.5; }

.step.active { opacity: 1; }

/* Mark the steps that are finished and valid: */ .step.finish { background-color: hsla(222, 48%, 40%, 1); }

section { display: flex; flex-flow: row wrap; } section > div { flex: 1; padding: 0.5rem; } input[type="radio"] { display: none; &:not(:disabled) ~ label { cursor: pointer; } &:disabled ~ label { color: hsla(222, 48%, 40%, 1); border-color: hsla(222, 48%, 40%, 1); box-shadow: none; cursor: not-allowed; } } label { height: 100%; display: block; background: white; border: 2px solid hsla(222, 48%, 40%, 1); border-radius: 0px; margin-bottom: 1rem; //margin: 1rem; text-align: center; box-shadow: 0px 3px 10px -2px hsla(222, 48%, 40%, 0.5); position: relative; cursor: pointer; } input[type="radio"]:checked + label { background: hsla(222, 48%, 40%, 1); color: hsla(215, 0%, 100%, 1); box-shadow: 0px 0px 20px hsla(222, 48%, 40%, 0.75); &::after { color: hsla(215, 5%, 25%, 1); font-family: FontAwesome; border: 2px solid hsla(150, 75%, 45%, 1); content: "\f00c"; font-size: 14px; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); height: 50px; width: 50px; line-height: 50px; text-align: center; border-radius: 50%; background: white; box-shadow: 0px 2px 5px -2px hsla(0, 0%, 0%, 0.25); } } p { font-weight: 900; }

@media only screen and (max-width: 700px) { section { flex-direction: column; } }

var currentTab = 0; // Current tab is set to be the first tab (0) showTab(currentTab); // Display the crurrent tab var b1 = document.getElementById('b1'), b2 = document.getElementById('b2'); var state = "Hello!"; function showTab(n) { // This function will display the specified tab of the form... var x = document.getElementsByClassName("tab"); x[n].style.display = "block"; //... and fix the Previous/Next buttons: if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } else { document.getElementById("prevBtn").style.display = "inline"; } if (n == (x.length - 1)) { document.getElementById("nextBtn").innerHTML = "Получить список документов!"; } else { document.getElementById("nextBtn").innerHTML = "Далее"; } //... and run a function that will display the correct step indicator: fixStepIndicator(n) } function nextPrev(n) { // This function will figure out which tab to display var x = document.getElementsByClassName("tab"); // Exit the function if any field in the current tab is invalid: if (n == 1 && !validateForm()) return false; // Hide the current tab: x[currentTab].style.display = "none"; // Increase or decrease the current tab by 1: currentTab = currentTab + n; // if you have reached the end of the form... if (currentTab >= x.length) { // ... the form gets submitted: document.getElementById("regForm").submit(); return false; } // Otherwise, display the correct tab: showTab(currentTab); } function validateForm() { // This function deals with validation of the form fields var x, y, i, valid = true; x = document.getElementsByClassName("tab"); y = x[currentTab].getElementsByTagName("input"); // A loop that checks every input field in the current tab: for (i = 0; i < y.length; i++) { // If a field is empty... if (y[i].value == "") { // add an "invalid" class to the field: y[i].className += " invalid"; // and set the current valid status to false valid = false; } } // If the valid status is true, mark the step as finished and valid: if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; } return valid; // return the valid status } function fixStepIndicator(n) { // This function removes the "active" class of all steps... var i, x = document.getElementsByClassName("step"); for (i = 0; i < x.length; i++) { x[i].className = x[i].className.replace(" active", ""); } //... and adds the "active" class on the current step: x[n].className += " active"; }

Нажимая кнопку "отправить", Вы соглашаетесь с тем, что Ваша информация будет использована в соответствии с Политикой конфиденциальности, и Вы не против получать от нас информационные письма с полезной информацией по охране труда.