Question

我需要更改材质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>

Answer 1

把这个 [type="radio"].with-gap:checked+label:after { background-color: orange !important; }

这里是example

Answer 2

使用以下样式作为单选按钮的内点：

.with-gap[type="radio"]:checked+label:before{
  border-color: #ff9800;
}

使用以下样式作为单选按钮的外边框：

customers

希望它有所帮助。

Answer 3

尝试使用以下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;
}

Answer 4

试试这个我希望它能起作用

＆＃13;

[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;
}

＆＃13;

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

＆＃13;

Answer 5

红色

  [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);
}

改变收音机颜色材料设计

5 个答案: