无法让占位符显示在输入框中

Question

.main {
background-color: #151515;
}
.signup_container {
align-items: center;
justify-self: center;
margin: 0 auto;
height: 100vh;
background-color: #151515;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0 50px;
}
.signup_content {
padding-top: 100px;
font-size: 2rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 50%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
text-align: center;
}
.signup_input-position {
position: relative;
align-items: center;
justify-self: center;
margin: 0 auto;
width: 200px;
height: 25px;
display: block;
margin-top: 25px;
}

<div class="main">
<div class="signup_container">
<div class="signup_content">
<h1>Sign Up</h1>
<input type="text" name="uname" placeholder="Username" class="signup_input-position" />
</div>
</div>
</div>

我有一个类和一个占位符，但我不明白为什么占位符没有出现在输入框中。

注册页面的图像。

html 中定义的一些css

Answer 1

您使用

-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;

这意味着输入颜色将是透明的，这就是占位符不可见的原因。您可以使用其他颜色，而不是使用透明颜色。

.main {
background-color: #151515;
}
h1 {
color: white;
}
.signup_container {
align-items: center;
justify-self: center;
margin: 0 auto;
height: -webkit-fill-available;
background-color: #151515;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0 50px;
}
.signup_content {
padding-top: 100px;
font-size: 2rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 50%;
-webkit-background-clip: text;
-moz-background-clip: text;
text-align: center;
}
.signup_input-position {
position: relative;
align-items: center;
justify-self: center;
margin: 0 auto;
width: 200px;
height: 25px;
display: block;
margin-top: 25px;
}

<div class="main">
<div class="signup_container">
<div class="signup_content">
<h1>Sign Up</h1>
<input type="text" name="uname" placeholder="Username" class="signup_input-position" />
</div>
</div>
</div>

Answer 2

不用担心，我只会选择简单的颜色而不是渐变。不能要求我浪费时间。