How to change the placeholder of an input in css?

Question

I have an input in a form that looks like this: <input type="text" placeholder="My placeholder" class="form-control DataTable--global-filter" value=""> I want to be able to change the placeholder content in css, from "My placeholder" to something else. I managed to change the color and background and the other attributes with the following css snippet, but the content of the placeholder I cannot change. What attribute should I put instead of content ?


::placeholder {
  font-style: italic;
  font-size: 1em;
  color: mintcream;
  background: thistle;
  padding: 5px;
  content : "some other placeholder" !important;
}

CSS is declarative and influenced heavily on cascading flow, but there are some "event-like" circumstances that allow a very limited control dynamically. Can you be more specific as to when you need to change the placeholder? Ex. if the input gets focus or on blur? — zer00ne
– zer00ne, Commented Jun 17, 2022 at 11:03
potential duplicate of stackoverflow.com/q/18329425/11107541 / stackoverflow.com/q/18329425/11107541 — starball
– starball ♦, Commented Jun 15 at 22:07

Fabrizio Calderan · Accepted Answer · 2022-06-17 12:19:35Z

2

You can't change the value of an attribute in CSS but you could use a tricky workaround if your input is inside a form and you can wrap the input.

In short:

wrap the input with a <span> element
overlap the span::before pseudoelement over the input and apply the style you chose for the :placeholder pseudoclass
change the color and background of :placeholder so it's not visible anymore
set pointer-events to none for span::before so every click to this element will be ignored and intercepted from the underlying input element.
use a required attribute for the input
when the form is :valid then hide the pseudolement

span::before,
::placeholder {
  font-family: arial;
  font-style: italic;
  font-size: .75rem;
  padding: 5px;
  line-height: 1;
  box-sizing: border-box;
}

::placeholder {
  color: transparent;
  background: transparent;
}

span {
  position: relative;
}

span::before {
  content : "some other placeholder very long" ;
  position: absolute;
  inset: 0 5px;
  z-index: 1;
  color: mintcream;
  background: thistle;
  width: calc(100% - 10px);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

form:valid span::before  {
  display: none;
}

<form>
  <span><input type="text" placeholder="my placeholder" required /></span>
</form>

edited Jun 17, 2022 at 12:19

answered Jun 17, 2022 at 10:29

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

3 Comments

kitten_world Over a year ago

Thanks! Is it possible that the placeholder remains visible on clicking inside the input?

Fabrizio Calderan Over a year ago

@kitten_world sure, see my update

NerdyDeeds Over a year ago

Or... yanno... just set the field to required and use the :focus and the valid pseudo-classes...

Collectives™ on Stack Overflow

How to change the placeholder of an input in css?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related