html - 如何更改 HTML-CSS 输入框中文本(由用户提供)的字体颜色？

Question

HTML代码:-

<p><input type="text" placeholder="Username"></p>

CSS 代码:-

.main-header input
{
    width: 90%;
    padding: 1rem;
    margin: 20px 0px;
    border: none;
    border-bottom: 4px solid #5f5fb0;
    font-size: 1.3rem;
    background: transparent;
    outline: none;
}
::-webkit-input-placeholder
{
    color: #fff;
}

我想将用户在网页上的input 框中输入的文本的颜色更改为#fff(white)。在这个元素中，我使用 HTML 和 CSS。我已经尝试了很多，但我无法使颜色变白。

请帮我解决这个问题。

Answer 1

我想你是这个意思。
您可以将其更改为 .main-header input。

input[type="text"]
{
    width: 90%;
    padding: 1rem;
    margin: 20px 0px;
    border: none;
    border-bottom: 4px solid #5f5fb0;
    font-size: 1.3rem;
    background: black;
    outline: none;
    color: white;
}
::-webkit-input-placeholder
{
    color: #fff;
}

<p><input type="text" placeholder="Username"></p>