I expected placeholder:no-underline
to remove the underline of an input's placeholder. However, placeholder-shown:no-underline
does work. But I don't understand the CSS that is being created. Why does one work and the other not?
Text-decoration on placeholder (placeholder:no-underline
) doesn't work with text-decorated input (underline
) in Chrome and Edge possibly due to a bug in Blink. You can see both ways work fine in Firefox. You can stick with placeholder-shown:no-underline
for the same result in this case.
First you need to know ::placeholder
and :placeholder-shown
target different things. Here ::placeholder
targets the placeholder text in the input, while :placeholder-shown
targets the input itself when it's currently displaying placeholder.
The behavior of adding underline on the input element and on the placeholder text is different as well. When underline is added on the input, all input texts will be underlined (along with the placeholder text by default[1]), otherwise only the placeholder text will be underlined.
In your case, underline is added on the input (which effects the placeholder as stated above), while placeholder-shown:no-underline
removes this underline only when the placeholder text is shown (no input), effectively removes the underline for ::placeholder
only. Hence, doing so is fine.
On the other hand, using ::placeholder
should be working, as you are styling the placeholder text directly. However, in Chrome and Edge, when there are visible text-decoration set on the input element itself, setting text-decoration on the placeholder has no effect no matter what. (Even using vendor prefix. In fact, you can see in the UA shadow DOM that the text-decoration is correctly applied, just not having any effect.) This looks like a bug to me unless I'm missing something.
Below example behaves differently in Chrome and FireFox at the time writing:
<script src="https://cdn.tailwindcss.com"></script>
<input class="underline placeholder-shown:no-underline" placeholder="Works for all browser" />
<input class="underline placeholder:no-underline" placeholder="Works only in Firefox" />
[1] As per spec the placeholder text is a tree-abiding pseudo-element, so it inherits any inheritable properties from their originating element including the text-decoration styles.