How to hide a CSS materialize checkbox from css

Asked

Viewed 166 times

0

I’m having a problem, I’m not able to hide an element using only the display:None in a materialize framework checkbox.

I tried this way:

  .listaPerfil input{
    display: none;  
  }
css materialize
  • 1

    Edit the question and enter the code. Search to make a [mcve].

  • materialize uses a label to create the appearance of the checkbox, ie you have to display:None in the checkbox label as well.

  • would that be? label input{ display:None}

  • Yes, with their respective ids

1 answer

1

The materialize is composed of two elements:

The input that is the element itself 

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

And the label that is the visual part of the element

<label for="test5">Red</label>

So one solution is to hide what surrounds these two elements.

Let’s take this case that’s in their documentation:

<p>
  <input type="checkbox" id="test5" />
  <label for="test5">Red</label>
</p>

Let’s put a class on the p tag

<p class="meucheck">
  <input type="checkbox" id="test5" />
  <label for="test5">Red</label>
</p>

And the css will look like this:

.meucheck{
    display:none;
}

Hiding the entire element.

You can also use class already ready materialize, see this link in the part 'Hiding/Showing Content', which shows all options.

http://materializecss.com/helpers.html

  • I understand, but I need to hide only the checkbox

  • But this will hide the checkbox, because the materialize uses the label to show the visual part of the checkbox, ie the actual checkbox is already hidden, even if you hide only the label will already work. Open the page right-click and click inspect element in the checkbox, you will see that it is actually a label.

Browser other questions tagged css materialize

You are not signed in. Login or sign up in order to post.