I'm trying to do a form with a background gradient, but I don't want it below the input fields. I'd like to see a white background color in input fields, but I can't use this property because of a label, I have to make it white styling the whole form. I'm using this code:
.login_form{
position: absolute;
top: 50%;
left: 50%;
width:80%;
height:auto;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
border-radius: 3px;
background-image: linear-gradient(to bottom right, #ffd27f, #ffe4b2, #ffd27f);
}
.col-3{width:68%;margin: 20px 16%; position: relative;padding-left:0;padding-right:0;!important}
input[type="text"],input[type="password"]{font: 14px/23px "Lato", Arial, sans-serif; color: #333;background-color:transparent; width: 100%; margin-
left:0%;box-sizing: border-box; letter-spacing: 1px;outline:none;border-radius:4px;}
.effect-16{padding: 6px 10px; border: 1px solid #aaa; border-radius:3px;background-color: transparent;}
.effect-16 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-16:focus ~ .focus-border,
.has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}
.effect-16 ~ label{position: absolute; left: 10px; width: 100%; font-size:85%; top: 7px; color: #888; transition: 0.3s; z-index:-1; letter-spacing: 0.5px;}
.effect-16:focus ~ label, .has-content.effect-16 ~ label{top: -20px; font-size: 12px; color: #3385ff; transition: 0.3s;}
.effect-16:focus + .has-content.effect-16 ~ label{top: -20px; font-size: 12px; color: #3385ff; transition: 0.3s;}
.curnot{cursor:not-allowed;}
.btni{pointer-events: none;margin-left:24%;width:52%;margin-bottom: 15px;text-align:center;background-color:#a0cad8;border:2px solid #a0cad8;
outline:none; color:white;padding-top:7px;padding-bottom:7px;border-radius:3px;font:bold 92% Lato, sans-serif;}
.btni:hover{color:white;}<form method="post" class="login_form" action="email_check.php" autocomplete="off">
<h1 class="title_login">Registrati</h1>
<div class="col-3 input-effect" style="margin-top:40px;">
<input class="effect-16" type="text" name="username" id="username" autocomplete="off">
<label>Scegli Username</label>
<span class="focus-border" id="focususername"></span>
</div>
<div class="col-3 input-effect">
<input class="effect-16" type="text" name="email" id="email" autocomplete="off">
<label>Email</label>
<span class="focus-border" id="focusemail"></span>
</div>
<div class="col-3 input-effect">
<input class="effect-16" type="password" name="password" id="password" autocomplete="off">
<label>Password</label>
<span class="focus-border" id="focpassword"></span>
</div>
<div class="col-3 input-effect">
<input class="effect-16" type="password" name="confirm" id="confirm" autocomplete="off">
<label>Conferma password</label>
<span class="focus-border" id="focconfirm"></span>
</div>
<div class="curnot">
<input type="submit" name="login" id="invia" class="btni" value="Avanti">
</div>
</form>Should I use the :not selector? If yes, how?
Sorry for my bad English, I hope it can be understood.
you can use these code
.login_form{
position: absolute;
top: 50%;
left: 50%;
width:80%;
height:auto;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
border-radius: 3px;
background-image: linear-gradient(to bottom right, #ffd27f, #ffe4b2, #ffd27f);
}
.login_form .col-3{width: 68%;
margin: 25px 16%;
position: relative;
padding-left: 0;
padding-right: 0;
background: #fff;
border-radius: 4px;}
input[type="text"],input[type="password"]{
font: 14px/23px "Lato", Arial, sans-serif;
color: #333;
background-color: transparent;
width: 100%;
box-sizing: border-box;
letter-spacing: 1px;
outline: none;
border-radius: 4px;
position: relative;
z-index: 1;
}
.effect-16{padding: 6px 10px; border: 1px solid #aaa; border-radius:3px;background-color: transparent;}
.effect-16 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-16:focus ~ .focus-border,
.has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}
.effect-16 ~ label{position: absolute; left: 10px; width: 100%; font-size:85%; top: 7px; color: #888; transition: 0.3s; letter-spacing: 0.5px;}
.effect-16:focus ~ label, .has-content.effect-16 ~ label{top: -20px; font-size: 12px; color: #3385ff; transition: 0.3s;}
.effect-16:focus + .has-content.effect-16 ~ label{top: -20px; font-size: 12px; color: #3385ff; transition: 0.3s;}
.curnot{cursor:not-allowed;}
.btni{pointer-events: none;margin-left:24%;width:52%;margin-bottom: 15px;text-align:center;background-color:#a0cad8;border:2px solid #a0cad8;
outline:none; color:white;padding-top:7px;padding-bottom:7px;border-radius:3px;font:bold 92% Lato, sans-serif;}
.btni:hover{color:white;}
<form method="post" class="login_form" action="email_check.php" autocomplete="off">
<h1 class="title_login">Registrati</h1>
<div class="col-3 input-effect" style="margin-top:40px;">
<input class="effect-16" type="text" name="username" id="username" autocomplete="off">
<label>Scegli Username</label>
<span class="focus-border" id="focususername"></span>
</div>
<div class="col-3 input-effect">
<input class="effect-16" type="text" name="email" id="email" autocomplete="off">
<label>Email</label>
<span class="focus-border" id="focusemail"></span>
</div>
<div class="col-3 input-effect">
<input class="effect-16" type="password" name="password" id="password" autocomplete="off">
<label>Password</label>
<span class="focus-border" id="focpassword"></span>
</div>
<div class="col-3 input-effect">
<input class="effect-16" type="password" name="confirm" id="confirm" autocomplete="off">
<label>Conferma password</label>
<span class="focus-border" id="focconfirm"></span>
</div>
<div class="curnot">
<input type="submit" name="login" id="invia" class="btni" value="Avanti">
</div>
</form>