Can I put a <span> inside of an input placeholder? - html

Question

I am doing a project that has a input like this:
<div className="search__bar__description form__control">
<input
placeholder="Filter by title, companies, expertise..."
aria-label="Enter company, title, or expertise here"
onChange={e => setSearchInput(e.target.value)}
value={searchInput}
/>
</div>
When the site is in desktop I want to have that whole long placeholder but when in mobile I want the placeholder just to say Filter by title...
I am trying to figure out how to do this is CSS. Can I put a span inside of the placeholder & then just hide it? Would that be valid HTML? If it isn't W3C valid HTML can you please tell me how to do this?
Thanks in advance!

Answer 1

First, you don't need JavaScript to do this. Although you cannot put a span inside an input, you can perform some trickery using the :placeholder-shown pseudo-class to achieve what you're after. Browser support for this pseudo-class, at the time of this post, is really good.
From MDN:
The :placeholder-shown CSS pseudo-class represents any <input> or
<textarea> element that is currently displaying placeholder text.
This example makes the input placeholder color transparent on smaller-sized screens, visually hiding it. The span containing the short label is then shown at this break point. Notice it's styled and positioned so that it looks as close to the original placeholder text as possible. Finally, using the pseudo-class mentioned above, we hide the short label when the original placeholder is not shown (when input is not blank).
.form__control {
position: relative;
}
.short-label {
display: none;
pointer-events: none;
}
#media screen and (max-width: 700px) {
::placeholder {
color: transparent;
}
.short-label {
position: absolute;
left: 4px;
top: calc(50% + 1px);
transform: translateY(-50%);
font-size: 11px;
color: rgb(43%, 43%, 43%);
font-family: sans-serif;
letter-spacing: 0.4px;
display: block;
font-weight: lighter;
}
input:not(:placeholder-shown)+.short-label {
display: none;
}
}
<div class="search__bar__description form__control">
<input placeholder="Filter by title, companies, expertise..." aria-label="Enter company, title, or expertise here" />
<span class="short-label">Filter by title...</span>
</div>
jsFiddle

Answer 2

You can't put a span inside a placeholder.
The common solution to what you want to achieve is to have the placeholder text as a separate element, underlaid behind the text field. And then you can do whatever markup and styling you want to it. This, of course, is more effort, but such is the way of bespoke engineering.
You can see an advanced example here: https://css-tricks.com/float-labels-css/
If you ignore the animations, the take-away from his code example is that the <label> element is used instead of the placeholder attribute, and is underlaid behind the input field, so it looks the same, but then can be manipulated with all the same CSS (int his case, adding some fancy transitions) and sub-elements as any other standard element.