Search code examples
cssmaterializedisplay

Can't hide radio button in materializecss?

The display css is not working (display:none) for input[type="radio"] elements.

Solution

  • The elements you see are actually not the real radio buttons because custom radio buttons are used. Remove them like this:

    .star-rating {
  direction: rtl;
  display: inline-block;
  padding: 20px
}

.star-rating label:before,
.star-rating label:after {
  display: none;
}

.star-rating label {
  color: #bbb;
  font-size: 18px;
  padding: 0;
  cursor: pointer;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out
}

.star-rating label:hover,
.star-rating label:hover~label,
.star-rating input[type=radio]:checked~label {
  color: #f2b600
}
    <html>

<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>

<div class="star-rating">
  <input id="star-5" type="radio" name="rating" value="star-5">
  <label for="star-5" title="5 stars">
      <i class="active fa fa-star" aria-hidden="true"></i>
  </label>
  <input id="star-4" type="radio" name="rating" value="star-4">
  <label for="star-4" title="4 stars">
      <i class="active fa fa-star" aria-hidden="true"></i>
  </label>
  <input id="star-3" type="radio" name="rating" value="star-3">
  <label for="star-3" title="3 stars">
      <i class="active fa fa-star" aria-hidden="true"></i>
  </label>
  <input id="star-2" type="radio" name="rating" value="star-2">
  <label for="star-2" title="2 stars">
      <i class="active fa fa-star" aria-hidden="true"></i>
  </label>
  <input id="star-1" type="radio" name="rating" value="star-1">
  <label for="star-1" title="1 star">
      <i class="active fa fa-star" aria-hidden="true"></i>
  </label>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

</body>

</html>