覆蓋兌現風格

我使用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覆蓋單選按鈕的默認樣式，只留下我的星星？

來源

2017-02-25 Camilo Ortegón

您是否嘗試過實現.browser-default類？不完全確定它是否適用於ul和select以外的其他任何內容。 – pandamakes

@pandamakes我沒有，但也可能有一些默認物化風格的這些元素。 –

嗨，你是否設法解決你的問題？面對相同的問題 – Dudis

如果使用的是青菜，您可以通過編輯/sass/components/forms/_forms.scss

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

被停止進口的形式造型，但請記住，不關你的單選按鈕將有材質樣式。

來源

2017-02-25 06:04:33

我有同樣的問題，所有我想要的是刪除這些圈子，你想以同樣的方式，但我的ID很容易與後續的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。

來源

2017-08-16 14:57:47 Marco

覆蓋兌現風格

回答

相關問題