How to hide placeholder on an input with just click on a label?

How to hide placeholder on an input with just click on a label?

I want to hide the input placeholder text when click on label. Without inside click on input. Any idea?

label:focus input::-webkit-input-placeholder {
  opacity: 0;

label:focus input::placeholder {
  opacity: 0;

Not wanna work… Or how to stay the placeholder hide if is focus on label inside input? Because if above not work I not see any way to change the opacity value if focus a label other than just for input works.

Thank you!!!

1 Like

Here’s a codepen with the solution you wanted: codepen link

You don’t need to use a checkbox hack for this (unless you want it to be a toggle).


The tabindex is a hack also to be fair. And it’s not necessary on the last example you had.

Read section: Accessibility concerns

checkbox hack is just the colloquial name for the technique of using a hidden checkbox to trigger some CSS. Though I would argue that using tabindex isn’t a hack, it is a global attribute supported by all elements in HTML5.

I just copy pasted the HTML and didn’t really think about removing it on the last example, but fair point.

Don’t really think it is that big of an accessibility concern. The example isn’t even using a for attribute for the label, that would have been more worth pointing out if you are worried about accessibility.

Blind people don’t use mouse., they use tab. You’re basically forcing them to cycle on labels that don’t mean anything. Thus, tabIndex should be only on fields where a user inputs information.

I call it a hack because it’s not what tabIndex was meant to do.

If your site is not ADA accessible you could find yourself in a lawsuit.

1 Like

Don’t be like Dominos:

You haven’t connected the label to the input, you just have a label and an input without any relationship between them. You don’t need to do anything except:

<input id="some_meaningful_id" placeholder="this will be the text">
<label for="some_meaningful_id">this will be the text</label>

You can set it to tabindex="-1" to make it not reachable via sequential keyboard navigation.

You’re obviously right and the last example was kind of a version of that just using nesting instead. However, strictly speaking, it doesn’t actually work like it was supposed to when looking at the original CSS. The label focus is just supposed to remove the placeholder text without giving focus to the input. Because if that wasn’t the intention there would be no reason to target the placeholder in the CSS.

1 Like