[英]Changing radio color material design
我需要更改材質 css 單選按鈕顏色（間隙類型為橙色）
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
.with-gap[type="radio"].filled-in:checked + label:after{
border: 2px solid #ff9800;
background-color: #ff9800;
}
<p>
<input class="with-gap" name="group1" type="radio" id="test3" />
<label for="test3">Green</label>
</p>
把這個[type="radio"].with-gap:checked+label:after { background-color: orange !important; } [type="radio"].with-gap:checked+label:after { background-color: orange !important; }
這是例子
試試這個我希望它會起作用
[type="radio"]:checked + label::after, [type="radio"].with-gap:checked + label::after { background-color: rgb(255, 138, 6) !important; } [type="radio"]:checked + label::after, [type="radio"].with-gap:checked + label::before, [type="radio"].with-gap:checked + label::after { border: 2px solid rgb(255, 138, 6) !important; }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <style> </style> <p> <input class="with-gap" name="group1" type="radio" id="test3" /> <label for="test3">Green</label> </p> </body> </html>
對單選按鈕的內點使用以下樣式：
.with-gap[type="radio"]:checked+label:after{
background-color: #ff9800;
border-color: #ff9800;
}
對單選按鈕的外邊框使用以下樣式：
.with-gap[type="radio"]:checked+label:before{
border-color: #ff9800;
}
希望能幫助到你。
嘗試使用以下 CSS
input[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:after{
background-color: #ff9800;
}
input[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:before, [type="radio"].with-gap:checked+label:after {
border: 2px solid #ff9800;
}
紅色
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after {
background-color:rgb(255, 0, 0);
}
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before,
[type="radio"].with-gap:checked+span:after {
border: 2px solid rgb(255, 0, 0);
}
我知道這是一個老問題，但我最近遇到了與 Materialise 單選按鈕着色類似的問題。 我正在創建一個包含通過、失敗、未檢查和不適用輸入的調查表，並且需要四個單選按鈕的顏色不同。 我為每個跨度添加了一個額外的類，並從 CSS 中定位這個類以覆蓋 Materialize 的標准樣式。 我很高興通過選擇器成為標准的物化綠色。
HTML：
<label>
<input type="radio" id="answer_1" name="answer_1" value="Pass"/>
<span class="span-pass">Pass</span>
</label>
<label>
<input type="radio" id="answer_1" name="answer_1" value="Fail"/>
<span class="span-fail">Fail</span>
</label>
<label>
<input type="radio" id="answer_1" name="answer_1" value="NC"/>
<span class="span-nc">Not Checked</span>
</label>
<label>
<input type="radio" id="answer_1" name="answer_1" value="NA"/>
<span class="span-na">Not Applicable</span>
</label>
CSS：
[type="radio"]:checked+span.span-fail:after, [type="radio"].with-gap:checked+span.span-fail:after {
background-color: red;
border: 2px solid red;
}
[type="radio"]:checked+span.span-nc:after, [type="radio"].with-gap:checked+span.span-nc:after {
background-color: orange;
border: 2px solid orange;
}
[type="radio"]:checked+span.span-na:after, [type="radio"].with-gap:checked+span.span-na:after {
background-color: #555;
border: 2px solid #555;
}
希望這對那里的人有所幫助。
HTML
<label>
<input class="with-gap radio-blue" name="group1" type="radio" checked />
<span>Test</span>
</label>
CSS
.radio-blue.with-gap:checked+span:not(.lever):after
border: 2px solid #536dfe
background-color: #536dfe
.radio-blue.with-gap:checked+span:not(.lever):before
border: 2px solid #536dfe
是否有一個用於在Material Design Lite中更改文本顏色的html類？
[英]Is there a html class for changing text color in material design lite?
使用JavaScript和單選輸入更改HTML中的背景色有什么錯誤
[英]What is the Error in changing Background Color in HTML using JavaScript and radio input
：checked時，使用單選按鈕輸入的CSS更改背景顏色
[英]Changing background color with CSS on radio button input when :checked
Django 大小（下拉）和顏色（單選按鈕），價格/圖像取決於單選按鈕數據 JQuery
[英]Django Size (Dropdown) and Color (Radio Buttons) with changing prices/images dependant of radio button data JQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.