代码之家 › 专栏 › 技术社区 › Kalidas Rajeev

无法在materializecss中隐藏单选按钮?

display materialize css

-1

Kalidas Rajeev · 技术社区 · 7 年前

对于输入[类型=“无线电”]元素,显示css不起作用(显示:无)。

2 回复 | 直到 7 年前

Anonymous 7 年前

您看到的元素实际上不是真正的单选按钮,因为使用了自定义单选按钮。按如下方式删除它们:

.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>

Rupal 7 年前

只需在类之前添加“显示:无”标签即可。添加此代码:

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

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

.star-rating input[type=radio] {
    display: none !important; 
}
.star-rating label:before{
  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>