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

Question

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.

Kimura Shinji · Accepted Answer · 2021-03-15 15:09:58Z

2

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>

answered Mar 15, 2021 at 15:09

Kimura Shinji

1,7604 gold badges24 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kimura Shinji Over a year ago

And change "background-color: transparent;".

SDB PROGRAM LEARNER Over a year ago

Thank you, Sir, I have tried your code and it works properly

Kimura Shinji Over a year ago

You are welcome. can you approve my answer? Thank you. ;)

a.mola · Accepted Answer · 2021-03-15 15:21:41Z

1

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

input {
  color: white;
  background-color: black;
}

<input type="text">

edited Mar 15, 2021 at 15:21

answered Mar 15, 2021 at 15:09

a.mola

4,0119 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related