【发布时间】：2021-05-11 05:16:59
【问题描述】：
我正在尝试使用背景渐变制作一个表单，但我不希望它位于输入字段下方。我想在输入字段中看到白色背景颜色，但由于标签的原因，我不能使用此属性，我必须将其设置为整个表单的白色样式。 我正在使用此代码：
.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>我应该使用 :not 选择器吗？如果是，怎么做？
对不起，我的英语不好，希望能被理解。
【问题讨论】：
标签： html css css-selectors background-color