Html Question posted in
Some basic documentation can be found here.

'Placeholder' text in an HTML or Blazor input control – Can it be 'lighter'?

I notice that on most sites (including Stack Overflow) that it is thankfully very clear to my eye when an input is merely displaying ‘placeholder’ text as opposed to the text I might type into the input.

And yet (unless I’m missing something) in my Blazor apps, the default ‘placeholder’ text seems to appear almost dark enough that it can easily be mistaken for actual input text.

I understand that I could compose ‘placeholder’ strings that are unlikely to ever be mistaken for actual input text, but I thought I’d ask this anyway; just in case there’s an answer out there:

Is there a way to make ‘placeholder’ text look more like…well… ‘placeholder’ text? For example, I’m doubtful, but is there a way for CSS just to address ‘placeholder’ font styling?

Tags:

2

Answers


  1. 0 
    input::placeholder,
textarea::placeholder {
  font-style: italic;
}
    Login or Signup to reply.
  2. 0

    Yes, it is possible to style the placeholders using CSS.
    Lets take a look at an example!

    input[type="text"]::placeholder{
  font-size:10px;
  opacity:0.7;
}

input[type="text"]#name::placeholder{
  opacity:1;
  font-weight:700;
  color:red;
}
    <input type="text" placeholder="Hello">

<input id="name" type="text" placeholder="Enter your name">

    You can target a specific input field using id as shown in the code.
    Thanks!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search