How to change font color of the text(Given by the user) in input-box in HTML-CSS?

user_14616921 0
Viewed 436

HTML code:-

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

CSS code:-

.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;
}

I want to change the color to #fff(white) of the text given by the user in the input box on the webpage. In this project, I am using HTML and CSS. I had tried very much but I can not make the color white.

Please help me to solve this problem.

colors input css html
2 Answers

I think you mean this.
You can change it to .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>

user_148554880

Just give the color to the input tag's selector itself the color property

input {
  color: white;
  background-color: black;
}
<input type="text">

user_153501390
Related