如何更改单选按钮的颜色，在单选按钮中添加多种颜色

Question

我希望能够更改我的单选按钮颜色，但不仅仅是一种颜色，而是三种不同的颜色......

我希望1,2和3为红色.. 4为橙色，5为绿色......

我有这个编码：

/* Option 1 */
input[type='radio'] {   -webkit-appearance:none;   width:20px;   height:20px;   border:1px solid red;   border-radius:50%;   outline:none;   box-shadow:0 0 5px 0px red inset; }

input[type='radio']:hover {   box-shadow:0 0 5px 0px red inset; }

input[type='radio']:before {   content:'';   display:block;   width:60%;   height:60%;   margin: 20% auto;       border-radius:50%;  } input[type='radio']:checked:before {   background:red; }

/* Option 2 */
input[type='radio'] {   -webkit-appearance:none;   width:20px;   height:20px;   border:1px solid red;   border-radius:50%;   outline:none;   box-shadow:0 0 5px 0px red inset; }

input[type='radio']:hover {   box-shadow:0 0 5px 0px red inset; }

input[type='radio']:before {   content:'';   display:block;   width:60%;   height:60%;   margin: 20% auto;       border-radius:50%;  } input[type='radio']:checked:before {   background:red; }

/* Option 3 */
input[type='radio'] {   -webkit-appearance:none;   width:20px;   height:20px;   border:1px solid red;   border-radius:50%;   outline:none;   box-shadow:0 0 5px 0px red inset; }

input[type='radio']:hover {   box-shadow:0 0 5px 0px red inset; }

input[type='radio']:before {   content:'';   display:block;   width:60%;   height:60%;   margin: 20% auto;       border-radius:50%;  } input[type='radio']:checked:before {   background:red; }

/* Option 4 */
input[type='radio'] {   -webkit-appearance:none;   width:20px;   height:20px;   border:1px solid orange;   border-radius:50%;   outline:none;   box-shadow:0 0 5px 0px orange inset; }

input[type='radio']:hover {   box-shadow:0 0 5px 0px orange inset; }

input[type='radio']:before {   content:'';   display:block;   width:60%;   height:60%;   margin: 20% auto;       border-radius:50%;  } input[type='radio']:checked:before {   background:orange; }

/* Option 5 */
input[type='radio'] {   -webkit-appearance:none;   width:20px;   height:20px;   border:1px solid green;   border-radius:50%;   outline:none;   box-shadow:0 0 5px 0px green inset; }

input[type='radio']:hover {   box-shadow:0 0 5px 0px green inset; }

input[type='radio']:before {   content:'';   display:block;   width:60%;   height:60%;   margin: 20% auto;       border-radius:50%;  } input[type='radio']:checked:before {   background:green; }

但它似乎没有改变所有的颜色......只是让它们全部变成绿色......？

Answer 1

你必须去参加CSS课程。要使其正常工作，您必须像这样编辑html：

<input type='radio' class='red' />
<input type='radio' class='red' />
<input type='radio' class='red' />
<input type='radio' class='orange' />
<input type='radio' class='green' />

你的css看起来像：

    .green,
    .red,
    .orange {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border: 1px solid green;
      border-radius: 50%;
      outline: none;
      box-shadow: 0 0 5px 0px green inset;
    }
    .red {
      border: 1px solid red;
      box-shadow: 0 0 5px 0px red inset;
    }
    .orange {
      border: 1px solid orange;
      box-shadow: 0 0 5px 0px orange inset;
    }
    .green:hover {
      box-shadow: 0 0 5px 0px green inset;
    }
    .red:hover {
      box-shadow: 0 0 5px 0px red inset;
    }
    .orange:hover {
      box-shadow: 0 0 5px 0px orange inset;
    }
    .green:before,
    .red:before,
    .orange:before {
      content: '';
      display: block;
      width: 60%;
      height: 60%;
      margin: 20% auto;
      border-radius: 50%;
    }
    .green:checked:before {
      background: green;
    }
    .orange:checked:before {
      background: orange;
    }
    .red:checked:before {
      background: red;
    }

<input type='radio' class='red' name='custom' />
<input type='radio' class='red' name='custom' />
<input type='radio' class='red' name='custom' />
<input type='radio' class='orange' name='custom' />
<input type='radio' class='green' name='custom' />