gpt4 book ai didi

html - 自动填充清除背景技巧停止工作?

转载 作者:行者123 更新时间:2023-12-04 15:27:05 24 4
gpt4 key购买 nike

我将这段 CSS 实现为具有透明的自动填充背景。但是最近发生了一些变化,它停止工作了?

@-webkit-keyframes autofill {
to {
color: white;
background: transparent;

}
}

input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}

有没有办法解决这个问题?

Remove white background

  form {
background-color: red;
}

div {
margin: 15px 0;
position: relative;
width: 360px;
color: red;
background-color: red;
}

textarea,
select,
input {
height: 30px;
line-height: 30px;
border-radius: 5px;
border: 1px solid #000;
width: 100%;
box-sizing: border-box;
padding: 0 10px;
color: red;
background-color: red;
}

textarea {
height: 200px;
color: red;
background-color: red;
}

textarea+label {
width: calc(100% - 2px) !important;
top: 1px;
box-sizing: border-box;
border-radius: 5px 5px 0 0;
text-align: center;
color: red;
}

textarea:invalid,
select:invalid,
input:invalid {
box-shadow: none;
color: red;
}

textarea:invalid+label,
select:invalid+label,
input:invalid+label {
padding: 0 10px;
max-width: 360px;
color: red;
}

textarea:focus+label,
select:focus+label,
input:focus+label,
label {
position: absolute;
background: #a4a290;
max-width: 0;
padding: 0;
overflow: hidden;
left: 1px;
top: 1px;
height: 28px;
font: 14px/28px sans-serif;
-webkit-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
color: red;
border-radius: 5px 0 0 5px;
}

textarea:focus+label {
height: 0;
color: red;
@-webkit-keyframes autofill {
to {
color: white;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
<form>
<div>
<input type="text" id="firstname" required/>
<label for="firstname">First Name</label>
</div>
<div>
<input type="text" id="secondname" required/>
<label for="secondname">Second Name</label>
</div>
<div>
<select id="type" required>
<option value=""></option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
<option value="3">Type 3</option>
<option value="4">Type 4</option>
</select>
<label for="type">Select type...</label>
</div>
<div>
<textarea id="comment" required/></textarea>
<label for="comment">Comment</label>
</div>
</form>


enter image description here

最佳答案

这样做就可以完美地完成工作:

input:-webkit-autofill {
-webkit-text-fill-color: transparent;
transition: background-color 5000s ease-in-out 0s;
}

form {
background-color: red;
}

div {
margin: 15px 0;
position: relative;
width: 360px;
color: red;
background-color: red;
}

textarea,
select,
input {
height: 30px;
line-height: 30px;
border-radius: 5px;
border: 1px solid #000;
width: 100%;
box-sizing: border-box;
padding: 0 10px;
color: red;
background-color: red;
}

textarea {
height: 200px;
color: red;
background-color: red;
}

textarea+label {
width: calc(100% - 2px) !important;
top: 1px;
box-sizing: border-box;
border-radius: 5px 5px 0 0;
text-align: center;
color: red;
}

textarea:invalid,
select:invalid,
input:invalid {
box-shadow: none;
color: red;
}

textarea:invalid+label,
select:invalid+label,
input:invalid+label {
padding: 0 10px;
max-width: 360px;
color: red;
}

textarea:focus+label,
select:focus+label,
input:focus+label,
label {
position: absolute;
background: #a4a290;
max-width: 0;
padding: 0;
overflow: hidden;
left: 1px;
top: 1px;
height: 28px;
font: 14px/28px sans-serif;
-webkit-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
color: red;
border-radius: 5px 0 0 5px;
}

textarea:focus+label {
height: 0;
color: red;
}

input:-webkit-autofill {
-webkit-text-fill-color: black;
transition: background-color 5000s ease-in-out 0s;
}
<form>
<div>
<input type="text" id="firstname" required />
<label for="firstname">First Name</label>
</div>
<div>
<input type="email" id="email" required />
<label for="email">Email</label>
</div>
<div>
<input type="text" id="secondname" required />
<label for="secondname">Second Name</label>
</div>
<div>
<select id="type" required>
<option value=""></option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
<option value="3">Type 3</option>
<option value="4">Type 4</option>
</select>
<label for="type">Select type...</label>
</div>
<div>
<textarea id="comment" required /></textarea>
<label for="comment">Comment</label>
</div>
</form>


Source

关于html - 自动填充清除背景技巧停止工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62046993/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com