Develop Reference

Css not working when label tag placed before input tag?

The switching of the order placement of the two tags (input and label) stops either the function to run or the css to load! I've tried messing around with it but to no avail. I want the boxes to appear around the yes or no options and other than that the css is working fine so its just this one section
<ul>${q.a.map(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br>\n')}</div></ul>`; }).join('\n')+frm.innerHTML;
#import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');
:root {
--white: #ffffff;
--light: #f0eff3;
--black: #000000;
--dark-blue: #1f2029;
--dark-light: #353746;
--red: #da2c4d;
--yellow: #f8ab37;
--grey: #ecedf3;
}
/* #Primary
================================================== */
body{
width: 100%;
background: var(--dark-blue);
overflow-x: hidden;
font-family: 'Poppins', sans-serif;
font-size: 17px;
line-height: 30px;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
h1{
font-family: 'Poppins', sans-serif;
font-size: 45px;
line-height: 30px;
color: var(--white);
letter-spacing: 1px;
font-weight: 500;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
p{
font-family: 'Poppins', sans-serif;
font-size: 17px;
line-height: 30px;
color: var(--white);
letter-spacing: 1px;
font-weight: 500;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
::selection {
color: var(--white);
background-color: var(--black);
}
::-moz-selection {
color: var(--white);
background-color: var(--black);
}
mark{
color: var(--white);
background-color: var(--black);
}
.section {
position: relative;
width: 100%;
display: block;
text-align: center;
margin: 0 auto;
}
.over-hide {
overflow: hidden;
}
.z-bigger {
z-index: 100 !important;
}
.background-color{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--dark-blue);
z-index: 1;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox:checked ~ .background-color{
background-color: var(--white);
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
position: absolute;
left: -9999px;
width: 0;
height: 0;
visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
position: relative;
width: 70px;
display: inline-block;
padding: 0;
margin: 0 auto;
text-align: center;
margin: 17px 0;
margin-top: 100px;
height: 6px;
border-radius: 4px;
background-image: linear-gradient(298deg, var(--red), var(--yellow));
z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
position: absolute;
font-family: 'unicons';
cursor: pointer;
top: -17px;
z-index: 2;
font-size: 20px;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox:not(:checked) + label:before {
content: '\eac1';
left: 0;
color: var(--grey);
background-color: var(--dark-light);
box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked + label:before {
content: '\eb8f';
left: 30px;
color: var(--yellow);
background-color: var(--dark-blue);
box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked ~ .section .container .row .col-12 p{
color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 h1{
color: var(--dark-blue);
}
.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
position: relative;
display: inline-block;
padding: 0;
padding-top: 20px;
padding-bottom: 20px;
width: 260px;
font-size: 52px;
line-height: 52px;
font-weight: 700;
letter-spacing: 1px;
margin: 0 auto;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
text-transform: uppercase;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
-webkit-text-stroke: 1px var(--white);
text-stroke: 1px var(--white);
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
}
.checkbox-budget:not(:checked) + label{
background-color: var(--dark-light);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
background-color: transparent;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-image: linear-gradient(138deg, var(--red), var(--yellow));
z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
position: relative;
display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
position: absolute;
content: attr(data-hover);
top: 0;
left: 0;
width: 100%;
overflow: hidden;
-webkit-text-stroke: transparent;
text-stroke: transparent;
-webkit-text-fill-color: var(--white);
text-fill-color: var(--white);
color: var(--white);
-webkit-transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
max-height: 0;
}
.checkbox-budget:checked + label span::before{
max-height: 100%;
}
.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
background-color: var(--light);
-webkit-text-stroke: 1px var(--dark-blue);
text-stroke: 1px var(--dark-blue);
box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}
.oval {
width: 200px;
height: 80px;
background: #39ff14;
border-radius: 40px;
font-size: 20px;
font-family: 'Poppins', sans-serif;
color: var(--white);
}
<body>
<body>
<div class="section over-hide z-bigger">
<input class="checkbox" type="checkbox" name="general" id="general">
<label class="for-checkbox" for="general"></label>
<div class="background-color"></div>
<div class="section over-hide z-bigger">
<div class="container pb-5">
<div class="row justify-content-center pb-5">
<div class="col-12 pt-1">
<h1 class="mb-4 pb-2">Lets Start</h1>
</div>
<form name="combitest">
<p> Score for test 1 (Stroke) = <span class="res"></span><br><br>
<p> Score for test 2 (Diabetes) = <span class="res"></span><br><br>
<p> Score for test 3 (some other test) = <span class="res"></span><br><br>
<input type="reset" class="oval" value="Clear Answers">
</form>
</body>
const questions=[ // questions, answers with their associated points:
{q:"History of Stroke", a:[["Yes",[10,10, 0]],["No" , [ 0, 0, 0]]]}
];
const frm =document.querySelector("form");
// create questions block first:
frm.innerHTML=questions.map(q=>{
let nam=q.q.toLowerCase().replace(/ /g,"").substr(0,12)
return `<div class="col-12 pt-1">
<p class="mb-4 pb-2">${q.q}</p
</div>
<div class="col-xl-10 pb-5">
<ul>${q.a.map(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br>\n')}</div></ul>`;
}).join('\n')+frm.innerHTML;
let spans=[...document.querySelectorAll('span.res')];
document.querySelector("input[type=reset]").onclick=ev=>spans.forEach(sp=>sp.textContent="");
frm.onchange=ev=>{
let res=[0,0,0], uls=document.querySelectorAll('form ul');
questions.forEach((qo,i)=>{ var a;
if (a=uls[i].querySelector("input:checked")){ // only if an answer has been chosen
let pts=qo.a.find(([el])=>el==a.value)[1] // get array with points for all tests
res.forEach((r,i)=>res[i]+=pts[i]); // add points to res-array
}
});
res.forEach((r,i)=>spans[i].textContent=r)
};

The + symbol is the next-sibling combinator.
If you swap the order, then the label isn't the next sibling, it is the previous one.
There is no previous sibling combinator (as CSS generally never applies a rule based on something that appears later in the DOM tree (for reasons of performance and to avoid conflicts)).
You might be able to keep the elements in the same DOM order while changing the order they are rendered in by combining a Flexbox layout with the order property.

I want to print different contents by layer pop-up with different buttons

The code I wrote now has a title with 1 attached, a title with 2 attached, and a comment with 2 attached at any time I press the button.
I don't know how to correct it because I'm writing it after looking at an example.
Among the codes written, there is data-id. The reason why I used this is because I asked another question and tried to graft the code that someone else gave me, but I couldn't do it and couldn't delete it when I posted it on the stackoverflow.
I want to keep as few code as possible.
function dialog() {
var dialogBox = $('.dialog'),
dialogTrigger = $('.dialog__trigger'),
dialogClose = $('.dialog__close'),
dialogTitle = $('.dialog__title'),
dialogContent = $('.dialog__content');
dialogTrigger.on('click', function(e) {
dialogBox.toggleClass('dialog--active');
e.stopPropagation();
var id = $(this).data('id');
});
dialogClose.on('click', function() {
dialogBox.removeClass('dialog--active');
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
dialogBox.removeClass('dialog--active');
}
});
$(document).on('click', function(e) {
if (
$(e.target).is(dialogBox) === false &&
$(e.target).is(dialogTitle) === false &&
$(e.target).is(dialogContent) === false
) {
dialogBox.removeClass('dialog--active');
}
});
}
$(function() {
dialog();
});
* {
box-sizing: border-box;
}
body {
background: #f1f1f1;
color: #333333;
font-family: 'Cairo', sans-serif;
font-size: 16px;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.dialog__trigger,
.dialog__action {
border: 3px solid #333333;
background: #f1f1f1;
padding: 15px 20px;
font-size: 1.1rem;
text-transform: uppercase;
display: block;
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.dialog__trigger:hover,
.dialog__action:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in;
box-shadow: 0 5px 10px rgba(51, 51, 51, 0.4);
}
.dialog__trigger:focus,
.dialog__action:focus {
outline: 0;
}
.dialog__trigger:active,
.dialog__action:active {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
.dialog {
background: #f1f1f1;
width: 70%;
position: absolute;
left: calc(50% - 35%);
top: 0;
padding: 30px;
box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
border: 3px solid #333333;
visibility: hidden;
opacity: 0;
-webkit-transition: all 180ms ease-in;
transition: all 180ms ease-in;
}
#media (max-width: 600px) {
.dialog {
width: 90%;
left: calc(50% - 45%);
}
}
.dialog .dialog--active {
top: 10%;
visibility: visible;
opacity: 1;
-webkit-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
.dialog .dialog__close {
font-size: 2rem;
line-height: 2rem;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
padding: 15px;
-webkit-transition: color 150ms ease;
transition: color 150ms ease;
}
.dialog .dialog__close:hover {
color: #E74C3C;
}
.dialog .dialog__title {
font-size: 2rem;
font-family: 'Slabo 27px', serif;
font-weight: 100;
margin: 0;
padding: 0 0 15px 0;
border-bottom: 2px solid #333333;
}
.dialog .dialog__content {
font-size: 1.1rem;
line-height: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="dialog__trigger" data-id="#dialog1">OPEN1</button>
<div class="dialog" id="dialog1" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE1</h2>
<p class="dialog__content">CONTENT1</p>
</div>
<button class="dialog__trigger" data-id="#dialog2">OPEN2</button>
<div class="dialog" id="dialog2" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE2</h2>
<p class="dialog__content">CONTENT2</p>
</div>

The first reason your code wasn't working because of a problem in a CSS rule: .dialog .dialog--active {} won't match the element you want it to, because both classnames are on the same DOM element; instead this should be .dialog.dialog--active {} (no space).
But this triggers both dialogs from both buttons; so you also need a javascript change to identify the specific elements for each button. You could use specific IDs and a different function for each button, or you could use the elements' relative position in the document:
$(this).next('.dialog').addClass('dialog--active');
Both fixes are shown below:
function dialog() {
var dialogBox = $('.dialog'),
dialogTrigger = $('.dialog__trigger'),
dialogClose = $('.dialog__close'),
dialogTitle = $('.dialog__title'),
dialogContent = $('.dialog__content');
dialogTrigger.on('click', function(e) {
$(this).next('.dialog').addClass('dialog--active');
e.stopPropagation();
var id = $(this).data('id');
});
dialogClose.on('click', function() {
dialogBox.removeClass('dialog--active');
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
dialogBox.removeClass('dialog--active');
}
});
$(document).on('click', function(e) {
if (
$(e.target).is(dialogBox) === false &&
$(e.target).is(dialogTitle) === false &&
$(e.target).is(dialogContent) === false
) {
dialogBox.removeClass('dialog--active');
}
});
}
$(function() {
dialog();
});
* {
box-sizing: border-box;
}
body {
background: #f1f1f1;
color: #333333;
font-family: 'Cairo', sans-serif;
font-size: 16px;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.dialog__trigger,
.dialog__action {
border: 3px solid #333333;
background: #f1f1f1;
padding: 15px 20px;
font-size: 1.1rem;
text-transform: uppercase;
display: block;
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.dialog__trigger:hover,
.dialog__action:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in;
box-shadow: 0 5px 10px rgba(51, 51, 51, 0.4);
}
.dialog__trigger:focus,
.dialog__action:focus {
outline: 0;
}
.dialog__trigger:active,
.dialog__action:active {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
.dialog {
background: #f1f1f1;
width: 70%;
position: absolute;
left: calc(50% - 35%);
top: 0;
padding: 30px;
box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
border: 3px solid #333333;
visibility: hidden;
opacity: 0;
-webkit-transition: all 180ms ease-in;
transition: all 180ms ease-in;
}
#media (max-width: 600px) {
.dialog {
width: 90%;
left: calc(50% - 45%);
}
}
.dialog.dialog--active {
top: 10%;
visibility: visible;
opacity: 1;
-webkit-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
.dialog .dialog__close {
font-size: 2rem;
line-height: 2rem;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
padding: 15px;
-webkit-transition: color 150ms ease;
transition: color 150ms ease;
}
.dialog .dialog__close:hover {
color: #E74C3C;
}
.dialog .dialog__title {
font-size: 2rem;
font-family: 'Slabo 27px', serif;
font-weight: 100;
margin: 0;
padding: 0 0 15px 0;
border-bottom: 2px solid #333333;
}
.dialog .dialog__content {
font-size: 1.1rem;
line-height: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="dialog__trigger">OPEN1</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE1</h2>
<p class="dialog__content">CONTENT1</p>
</div>
<button class="dialog__trigger">OPEN2</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE2</h2>
<p class="dialog__content">CONTENT2</p>
</div>
But I would suggest a lot of other changes. Your code includes some obsolete CSS rules, follows some bad practices (it's not a great idea to handle every event from the document node for example) and is just generally very overcomplicated.
Here's a cleaner example:
$('.dialog__trigger').on('click', function() {
// Add the 'active' class to the next dialog element.
// (You could also just use .show() here)
$(this).next('.dialog').addClass('dialog--active');
});
$('body, .dialog__close').on('click', function() {
// remove the 'active' class from any element, when either the
// body or a close button is clicked.
$('.dialog--active').removeClass('dialog--active');
});
$('#container').on('click', function(e) {
// prevent click events bubbling up to the body
e.stopPropagation();
});
$(document).keyup(function(e) {
// handle the escape key
if (e.keyCode === 27) {
$('.dialog--active').removeClass('dialog--active');
}
});
* {
box-sizing: border-box;
}
body {
background: #f1f1f1;
color: #333333;
font-family: 'Cairo', sans-serif;
font-size: 16px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.dialog__trigger,
.dialog__action {
border: 3px solid #333333;
background: #f1f1f1;
padding: 15px 20px;
font-size: 1.1rem;
text-transform: uppercase;
display: block;
transition: all 150ms ease-out;
transform: translateY(0px);
}
.dialog__trigger:hover,
.dialog__action:hover {
transform: translateY(-5px);
transition: all 100ms ease-in;
box-shadow: 0 5px 10px rgba(51, 51, 51, 0.4);
}
.dialog__trigger:focus,
.dialog__action:focus {
outline: 0;
}
.dialog__trigger:active,
.dialog__action:active {
transform: translateY(-3px);
}
.dialog {
background: #f1f1f1;
width: 70%;
position: absolute;
left: calc(50% - 35%);
top: 0;
padding: 30px;
box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
border: 3px solid #333333;
visibility: hidden;
opacity: 0;
transition: all 180ms ease-in;
}
#media (max-width: 600px) {
.dialog {
width: 90%;
left: calc(50% - 45%);
}
}
.dialog.dialog--active {
top: 10%;
visibility: visible;
opacity: 1;
transition: all 250ms ease-out;
}
.dialog .dialog__close {
font-size: 2rem;
line-height: 2rem;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
padding: 15px;
transition: color 150ms ease;
}
.dialog .dialog__close:hover {
color: #E74C3C;
}
.dialog .dialog__title {
font-size: 2rem;
font-family: 'Slabo 27px', serif;
font-weight: 100;
margin: 0;
padding: 0 0 15px 0;
border-bottom: 2px solid #333333;
}
.dialog .dialog__content {
font-size: 1.1rem;
line-height: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<button class="dialog__trigger">OPEN1</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE1</h2>
<p class="dialog__content">CONTENT1</p>
</div>
<button class="dialog__trigger">OPEN2</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE2</h2>
<p class="dialog__content">CONTENT2</p>
</div>
</div>

Stripe Element Quickstart example not rendering correctly

I am just getting started with Stripe's Element Quickstart. I have the following fiddle. As you can see, it looks nothing like the example. I've even loaded their https://js.stripe.com/v3/ file but have no idea what I'm missing:
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>

The page that the example is on here defines styles for the form, button, label, etc. You can find this css if you open up the console on their example site and search for this style tag <style media="screen"> embedded in the html. Add the css to your fiddle and it will look like their example.
body, html {
height: 100%;
background-color: #f7f8f9;
color: #6b7c93;
}
*, label {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
font-variant: normal;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}
button {
border: none;
border-radius: 4px;
outline: none;
text-decoration: none;
color: #fff;
background: #32325d;
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
border-radius: 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.025em;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
float: left;
margin-left: 12px;
margin-top: 28px;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
background-color: #43458b;
}
form {
padding: 30px;
height: 120px;
}
label {
font-weight: 500;
font-size: 14px;
display: block;
margin-bottom: 8px;
}
#card-errors {
height: 20px;
padding: 4px 0;
color: #fa755a;
}
.form-row {
width: 70%;
float: left;
}
.token {
color: #32325d;
font-family: 'Source Code Pro', monospace;
font-weight: 500;
}
.wrapper {
width: 670px;
margin: 0 auto;
height: 100%;
}
#stripe-token-handler {
position: absolute;
top: 0;
left: 25%;
right: 25%;
padding: 20px 30px;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
0 15px 35px rgba(50, 50, 93, 0.15),
0 5px 15px rgba(0, 0, 0, 0.1);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
transform: translateY(0);
opacity: 1;
background-color: white;
}
#stripe-token-handler.is-hidden {
opacity: 0;
transform: translateY(-80px);
}
/**
* The CSS shown here will not be introduced in the Quickstart guide, but shows
* how you can use CSS to style your Element's container.
*/
.StripeElement {
background-color: white;
height: 40px;
padding: 10px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}

Custom form submit button

I'm making a custom subscribe button for my MailChimp list. I can't seem to get my button linked up with the form input method though.
var subscribe_button = document.querySelector(".fi-mail");
subscribe_button.addEventListener('click', function(){
subscribe_button.classList.remove("fi-mail");
subscribe_button.classList.add("fi-check");
});
* {
-webkit-font-smoothing: antialiased;
font-family: Helvetica Neue, Helvetica, Arial, Sans-Serif;
font-size: 15px;
color: #fff;
}
html {
background: linear-gradient(134.72deg, #EB4B92 0%, #CA76E3 100%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
body {
text-align: center;
}
form {
background: transparent;
height: 50px;
width: 300px;
-webkit-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, .1);
top: 50%;
left: 50%;
position: absolute;
margin: -25px 0 0 -150px;
}
input {
background: transparent;
float: left;
padding: 14px 0;
border: 0;
outline: 0;
margin-left: 25px;
width: 220px;
}
form a {
float: right;
background: #4db6ec;
border: 0;
line-height: 38px;
height: 38px;
width: 38px;
margin: 6px 6px 0 0;
-webkit-border-radius: 50%;
border-radius: 50%;
color: #fff;
font-size: 1.2em;
text-align: center;
cursor: pointer;
text-decoration: none;
}
form a:hover {
background: #75c8f3;
}
form a.fi-check {
background: #aed43e;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
form a.fi-check:hover {
cursor: default;
}
.a-thing {
color: #fff;
font-weight: bold;
font-size: .9em;
text-shadow: 0 1px rgba(0,0,0,0.2);
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -195px;
}
.a-thing a {
color: #eeffbc;
text-decoration: none;
}
.a-thing a:hover {
color: #fff;
}
#font-face {
font-family: "foundation-icons";
src: url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.eot");
src: url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.eot#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.svg#GeneralFoundicons") format("svg");
font-weight: normal;
font-style: normal;
}
[class*="fi-"]:before {
font-family: "foundation-icons";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
display: inline-block;
}
.fi-check:before {
content: "\f126";
}
.fi-mail:before {
content: "\f16d";
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .2);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: rgba(0, 0, 0, .2);
opacity: .2;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: rgba(0, 0, 0, .2);
opacity: .2;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(0, 0, 0, .2);
}
::-ms-input-placeholder { /* Microsoft Edge */
color: rgba(0, 0, 0, .2);
}
::placeholder { /* Most modern browsers support this now. */
color: rgba(0, 0, 0, .2);
}
<form action="https://fulfillingtheprophecy.us16.list-manage.com/subscribe/post?u=9c9cbcbf400c4df4622eef40f&id=0ae3f9ab0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" placeholder="ava#example.com">
<a type="submit" class="fi-mail"></a>
</form>

Take a look at this answer as I think it does a good job answering your question: (Is it safe to use anchor to submit form?).
Short Answer: Either of the following should work for you in place of your anchor tag.
<input type="submit" value="Submit!" />
or
<button type="submit">Submit!</button>

onclick for closing cookie bar

i'm developing an app that should show a cookie bar and if the user click on the "X" it should to close, i've thinked to do it with the onclick attribute but it is ignored.
This is my code:
console.log("Ready !");
var close = function () {
console.log("close");
}
.cookie-bar {
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #800000;
color: white;
font-size: 14px;
font-family: "Lato", sans-serif;
font-weight: 100;
transition: .8s;
animation: slideIn .8s;
animation-delay: .8s;
.message {
white-space: nowrap;
text-shadow: 0 1px 0 darken(red, 10%);
#media (max-width: 767px){
display: none;
}
}
.mobile {
display: none;
#media (max-width: 767px){
display: inline-block;
}
}
}
#keyframes slideIn {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
.close-cb {
border: none;
color: white;
background: darken(red, 20%);
position: absolute;
display: inline-block;
right: 10px;
top: 0;
cursor: pointer;
border-radius: 3px;
box-shadow: inset 0 0 3px 0 rgba(0,0,0,.2);
line-height: 30px;
height: 30px;
width: 30px;
font-size: 16px;
font-weight: bold;
&:hover {
background: darken(red, 10%);
}
}
.checkbox-cb {
display: none;
&:checked + .cookie-bar {
transform: translateY(-50px);
}
}
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" onclick="close()"/>
<div class="cookie-bar" id="cookie">
<span class="message">Questo sito utilizza i cookies</span>
<label for="checkbox-cb" class="close-cb" >x</a>
</div>
Can i solve it?
Thank's