Custom checkbox

HTML & CSS
1

I like solution from https://codepen.io/rolchau/pens/popular
and Custom checkbox with svg marker.
It source code like:

<input id="tmp" type="checkbox" class="promoted-input-checkbox"/>
    <label for="tmp">
      <svg><use xlink:href="#checkmark" /></svg>      
      Save recipient    
    </label>

As testing I did not manage to place label to upper level which is usual like

<label for="tmp">
<input id="tmp" type="checkbox" class="promoted-input-checkbox"/>
<svg><use xlink:href="#checkmark" /></svg>      
 Save recipient    
   </label>

How to manage this as checkbox will not work. Need help as label should be surround all elements like input and also SVG element.

2

Why do you need the label to surround the input? You don’t show an example of what you are trying to achieve.

The code is perfectly valid as it is and indeed including the input inside a label used to have issues with screen readers so i avoid that construct anyway.

As long as the label ‘for’ attribute matches the input ID then its perfect. The label and input will be related and the label will still activate the input.

If you need to reorder the html for styling purposes then you are probably doing something wrong.

Note that the technique for the checkbox replacement relies on the input being before the label so that it can be activated with a general sibling or adjacent sibling selector when checked.

If you can explain what problem you are having them we may be able to suggest a solution :slight_smile:

Note that there is a method (modern browsers only) to change the checkbox appearance without replacing it or using the sibling combinator.

(I updated example 2 in the demo to use a nested input inside a label although I still advise the first example as proper usage.)

3

Please find what I try to achieve:

Change pointer for the checkbox: https://stackoverflow.com/questions/41614446/change-pointer-for-checkbox-html

As I understand usability is better IMHO as you can click also text and the checkbox will be activated as it is a larger area not only a small box.

4

Sorry, but what has that got to do with the first question? You can add cursor pointer to your inputs if you want but that is not default behaviour for form elements and in my opinion detracts from accessibility. Essentially cursor pointer is only meant for url links.

No as I said above the best method for usability and accessibility is to have the label html separate from the input html as this aids screen readers rather than the nested approach where a screen reader may not be able to find the input because there is no association (as was previously the case).

You can still click the label or the input to activate either.

That’s purely a styling question and as you can see in my demo the checkboxes are actually bigger than the text. You could easily increase the padding on the label and move the checkbox inside the padding area of the label if you wanted larger clickable areas. Or you could style the checkbox larger.

Anyway i’ve given you examples of both inside and outside so I don’t really know what else I can offer you :slight_smile:

5

Thank you for the message!
I will try to test what is the best solution.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.