label inside of button - click button and activate the label

Question

When you click on this button, it will only checkoff the checkbox if you click on the "Hello" text. If you click on the button but not the text, it will not check off the box. How can I make it so no matter where I click on the button, it will check off the box?

<button>
    <label for="myId">Hello</label>
</button>


<input id="myId" type="checkbox" />

what exactly are you trying to do? if the hello text is inside the box, wont the both of them be pressed simultaneously if you press the button? — Hisham Bawa, May 12 '20 at 02:26

score 1 · Answer 1 · answered May 12 '20 at 01:35

1

You need to make the label to be full width and height as of the button like so:

<button style="padding: 0;">
    <label style="display: block; padding: 20px;" for="myId">Hello</label>
</button>


<input id="myId" type="checkbox" />

Here is the fiddle: https://jsfiddle.net/hxoqrf7v/

answered May 12 '20 at 01:35

Firman Putra

142
8

That does not work. I can still click on the button (not the text) and it still will not check off the box. Is there something else I can do with CSS to achieve this? – uionut351j May 12 '20 at 01:41
Are you sure? the only part that won't check off the box is when clicking on the border of the button, if you remove the border of the button, it works correctly on my end – Firman Putra May 12 '20 at 01:45
If you don't want any other actions on click event then you may can apply CSS on label in the way you want and just remove the button element. – Manikanta Chinta May 12 '20 at 02:24
My bad, it seems to work. Is the display: block; necessary? – uionut351j May 16 '20 at 20:21
It does not work in Firefox, works in chrome though – uionut351j May 16 '20 at 20:53
https://stackoverflow.com/a/5518143/11186955 I tried this solution bit it does not seem to work in Firefox 77. – uionut351j May 16 '20 at 21:20
@uionut351j Have you tried to add `display: block` when testing on firefox ? – Firman Putra May 17 '20 at 04:45

label inside of button - click button and activate the label

1 Answers1