How can I replace the text of "placeholder" with css?

Question

I have a search input and I need to change the content of placeholder which is currently no, but only with css. I have tried but I can't get it...

<input id="search-input" type="search" class="search-field" placeholder="no" value="" name="s" title="Search:">

Here my wrong css:

.seach-field::placeholder{
   display: none;
}

.seach-field::placeholder::after {
  content: "yes";
}

pd: this is my first time on Stackoverflow, I am sorry if I didn't put it right or if I didn't post it where it should be :(

you can't change the text of the placeholder with CSS, you have to use JS for that. — cloned, Dec 29 '21 at 12:59
https://stackoverflow.com/questions/8075986/how-to-set-placeholder-value-using-css — user3411746, Dec 29 '21 at 13:03

score -1 · Answer 1 · answered Dec 29 '21 at 13:19

You can do it whith a some tricks, but is not the correct way to do that, because the placeholder text you write with css is wrote over the text when you write in it. However I explain how to do it with CSS:

You can use the ::before selector to add some text before any block element.

.wrapper {
  position: relative;
}

.wrapper:before {
  position: absolute;
  content: 'Name';
  left: 10px;
  top: 2px;
  color: #ccc;
}

<p class="wrapper">
    <input id="name" type="text">
</p>

I hope I've helped you.

How can I replace the text of "placeholder" with css?

1 Answers1