Is possible hide the box of a checkbox?

Question

I have some check-boxes that have this form,

<label><input type="checkbox" name="Todos_dias" class="dayFilter">Todos</label>

Having the <label> outside I can check the checkbox clicking over the word and not only clicking the box. Now what I want is hide the box, and just have the word.

How can I do this? I found this post but it doesn't work for me because if I use display:none or visibility:hidden the checkbox stops working.

Thank you very much

I did a filter with some checkboxes, but the box is horrible xD — Lleims, Dec 24 '19 at 15:10
You are trying to implement a Filter function via checkboxes and you do not need the square-thingy, correct? Why do you not implement a js-function onto a div or a Button? :D — Kennuel, Dec 24 '19 at 15:11
Because I don't know how to save different selected options without the `checked` attribute — Lleims, Dec 24 '19 at 15:15

score 1 · Answer 1 · answered Dec 24 '19 at 15:14

set the checkbox width and height to 0

[type="checkbox"]{
  width: 0;
  height: 0;
}

<label><input type="checkbox" name="Todos_dias" class="dayFilter">Todos</label>

If you want to keep the labels position use opacity: 0;

[type="checkbox"]{
  opacity: 0;
}

<label><input type="checkbox" name="Todos_dias" class="dayFilter">Todos</label>

jbyrd · Answer 2 · 2019-12-24T15:55:43.857

Don't try to modify the existing checkbox styles (as issues with cross-browser form control styling are notorious).

Instead, just create your own style by hiding the checkbox altogether - see the following code snippet (which is also accessible - notice the highlight on focus):

html {
 box-sizing: border-box;
 background: #f2f2f2;
 padding: 20px 50px
}

/* Inherit box-sizing to make it easier to change the property
 * for components that leverage other behavior.*/
*,
*::before,
*::after {
 box-sizing: inherit;
}

/*style form to limit width and highlight the long label*/
form {
 margin: 0.25rem auto;
 max-width: 750px;
}

/*style wrapper to give some space*/
.wrapper {
 position: relative;
 margin-bottom: 0.5rem;
 margin-top: 0.5rem;
}

h3 {
  margin: 0;
}

/*style label to give some more space*/
.wrapper label {
 display: block;
 padding: 4px 0 4px 40px;
}

/*style and hide original checkbox*/
.wrapper input {
 position: absolute;
 top: 0;
 left: 0;
 width: 25px;
 height: 25px;
 opacity: 0;
}

/*position new box*/
.wrapper input + label::before {
 position: absolute;
 top: 0;
 left: 0;
 height: 25px;
 width: 25px;
 border: 2px solid;
 content: "";
}

/*create check symbol with pseudo element*/
.wrapper input + label::after {
 content: "";
 border: 4px solid;
 border-left: 0;
 border-top: 0;
 height: 18px;
 left: 8px;
 opacity: 0;
 position: absolute;
 top: 1px;
 transform: rotate(45deg);
 transition: opacity 0.2s ease-in-out;
 width: 10px;
}

/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
 opacity: 1;
}

/*focus styles—commented out for the tutorial, but you’ll need to add them for proper use*/
.wrapper input:focus + label::before {
 box-shadow: 0 0 0 3px #ffbf47; 
 outline: 3px solid transparent;
}

<form>
 <fieldset>
  
  <legend>
   <h3>Choose a Color</h3>
  </legend>

  <div class="wrapper">
   <input id="red" name="red" type="checkbox" value="red">
   <label for="red">Red</label>
  </div>

  <div class="wrapper">
   <input id="green" name="green" type="checkbox" value="green">
   <label for="green">Green</label>
  </div>

  <div class="wrapper">
   <input id="blue" name="blue" type="checkbox" value="blue">
   <label for="blue">Blue</label>
  </div>
  
 </fieldset>
</form>

(Note: this is also detailed in this article and I modified the snippet above from this codepen -- https://codepen.io/tutsplus/pen/rqrpqw -- and this is also covered in this stackoverflow answer).

Is possible hide the box of a checkbox?

2 Answers2