HTML and CSS - Styling default values in form inputs

Language Help CSS
1

Hello, I know that this is a very specific question, but I’d like to know.

In the third section of the HTML course, I learned about creating forms with for example empty text inputs. I was taught that you could add default values that instruct users what to fill in or give examples, of which the syntax would look like this:

Username:

I would like to know how I should apply CSS on specifically this value attribute. For example, it would be great to have a lower opacity on the default value, but this should not appear on the text which a user fills in.

Thank you in advance!

Kind regards,
Julian

1 Like
2

Hello and welcome on the forums. :grinning:

There is a way in HTML too, the placeholder attribute.
For example:

<input id="username" name="username" type="username" placeholder="username...">

Which appears like:
image
but when you start typing it disappears:
image

You can set its color, text-align and other CSS properties too with:

#username[placeholder] {
  color: green;
  text-align: center;
}

image
But most properties will effect writing:
image

By the way here’s the code if you need it.

Hope this helps :grinning:

1 Like