覆盖实体化样式

Question

我正在为我的项目使用materialize CSS，但我想覆盖单选按钮的样式，使用此page中的代码给出一些评级，所以我可以得到这个：

但相反，我得到了这个：

这是我的HTML：

<form id="ratingsForm">
    <div class="stars">
        <input type="radio" name="star" class="star-1" id="star-1" />
        <label class="star-1" for="star-1">1</label>
        <input type="radio" name="star" class="star-2" id="star-2" />
        <label class="star-2" for="star-2">2</label>
        <input type="radio" name="star" class="star-3" id="star-3" />
        <label class="star-3" for="star-3">3</label>
        <input type="radio" name="star" class="star-4" id="star-4" />
        <label class="star-4" for="star-4">4</label>
        <input type="radio" name="star" class="star-5" id="star-5" />
        <label class="star-5" for="star-5">5</label>
        <span></span>
    </div>
</form>

这就是让明星出现的CSS：

form .stars {
  background: url("stars.png") repeat-x 0 0;
  width: 150px;
  margin: 0 auto;
}
form .stars input[type="radio"] {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}
form .stars input[type="radio"].star-5:checked ~ span {
  width: 100%;
}
form .stars input[type="radio"].star-4:checked ~ span {
  width: 80%;
}
form .stars input[type="radio"].star-3:checked ~ span {
  width: 60%;
}
form .stars input[type="radio"].star-2:checked ~ span {
  width: 40%;
}
form .stars input[type="radio"].star-1:checked ~ span {
  width: 20%;
}
form .stars label {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0!important;
  padding: 0!important;
  text-indent: -999em;
  float: left;
  position: relative;
  z-index: 10;
  background: transparent!important;
  cursor: pointer;
}
form .stars label:hover ~ span {
  background-position: 0 -30px;
}
form .stars label.star-5:hover ~ span {
  width: 100% !important;
}
form .stars label.star-4:hover ~ span {
  width: 80% !important;
}
form .stars label.star-3:hover ~ span {
  width: 60% !important;
}
form .stars label.star-2:hover ~ span {
  width: 40% !important;
}
form .stars label.star-1:hover ~ span {
  width: 20% !important;
}
form .stars span {
  display: block;
  width: 0;
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  background: url("stars.png") repeat-x 0 -60px;
  -webkit-transition: -webkit-width 0.5s;
  -moz-transition: -moz-width 0.5s;
  -ms-transition: -ms-width 0.5s;
  -o-transition: -o-width 0.5s;
  transition: width 0.5s;
}

如何覆盖Materialise CSS中默认的单选按钮样式并仅留下我的星星？

Answer 1

如果您正在使用sass，则可以通过编辑/sass/components/forms/_forms.scss来停止导入表单样式

@import 'input-fields';
// @import 'radio-buttons';
@import 'checkboxes';
@import 'switches';
@import 'select';
@import 'file-input';
@import 'range';

但请记住，您的单选按钮都没有材质样式。

Answer 2

我遇到了同样的问题，我想要的是以你想要的方式移除这些圈子，但我更容易使用以下CSS：

[type="radio"]:not(:checked) + label::before, [type="radio"]:not(:checked) + label::after {
border: 0px;
}

[type="radio"]:checked + label::after, .with-gap[type="radio"]:checked + label::after {
    z-index: -999;
}

您只需要在实现后或在您拥有的任何CSS中包含它。