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

HTML-CSS
1

https://jsfiddle.net/vxq7bmtk/1/

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
5

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

6

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

https://jsfiddle.net/gd3ty7k5/

3 Likes
9

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.

12

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>
13

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