我的意思是,单选按钮本身由一个圆形和中心的一个点组成(当按钮被选中时)。我想改变的是两者的颜色。使用CSS可以做到这一点吗?


当前回答

试试这样做:

#yes{ border:2px solid white; box-shadow:0 0 0 1px #392; appearance:none; border-radius:50%; width:12px; height:12px; background-color:#fff; transition:all ease-in 0.2s; } #yes:checked{ background-color:#392; } #no{ border:2px solid white; box-shadow:0 0 0 1px #932; appearance:none; border-radius:50%; width:12px; height:12px; background-color:#fff; transition:all ease-in 0.2s; } #no:checked{ background-color:#932; } <input id="yes" type="radio" name="s"><label for="yes">Yes</label></br> <input id="no" type="radio" name="s"><label for="no">No</label>

有更少的代码,它看起来更好,你不需要玩:之前,:之后和位置达到效果。

其他回答

正如其他人所说,没有办法在所有浏览器中实现这一点,所以跨浏览器实现这一点的最好方法是使用javascript。基本上你必须把你的单选按钮变成链接(完全可自定义通过CSS)。每次点击链接都将绑定到相关的单选框,切换他的状态和其他所有状态。

您可以通过两种纯CSS方式实现自定义单选按钮

Via removing standard appearance using CSS appearance and applying custom appearance. Unfortunately this was doesn't work in IE. Demo: input[type="radio"] { /* remove standard background appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbbbbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ .flex { display: flex; align-items: center; } <div class="flex"> <input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label> </div> Via hiding radiobutton and setting custom radiobutton appearance to label's pseudoselector. By the way no need for absolute positioning here (I see absolute positioning in most demos). Demo: *, *:before, *:after { box-sizing: border-box; } input[type="radio"] { display: none; } input[type="radio"]+label:before { content: ""; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; margin-right: 3px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbbbbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked + label:before { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ label { display: flex; align-items: center; } <input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label>

这在本地CSS中是不可能的。您必须使用背景图像和一些javascript技巧。

您可以在无线电输入中嵌入span元素,然后在检查无线电输入时选择要呈现的颜色。看看下面这个来自w3schools的例子。

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>

在下面的代码段中改变背景颜色就可以了。

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

来源于如何创建自定义单选按钮

我改变了单选按钮的颜色和大小。试试这个

.radio-tile-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .radio-tile-group .input-container { position: relative; margin: 0.9rem; } .radio-tile-group .input-container .radio-button { opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; cursor: pointer; } .radio-tile { border: 1px solid #eea236; } .radio-tile-group .input-container .radio-tile-edit { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 25px; font-size: 12px; border-radius: 5px; padding: 0.2rem; transition: transform 300ms ease; height: 25px; } @media (min-width: 375px) and (max-width: 812px) { .radio-tile-group .input-container .radio-tile { margin-inline: 18px; } } .radio-tile-group .input-container .radio-button:checked+.radio-tile { border: 3px solid #2980b9; font-size: 12px; color: #797979; transform: scale(1.05, 1.05); } .radio-tile-group .input-container .radio-button:checked+.radio-tile .icon svg { fill: white; background-color: #2980b9; } .radio-tile-group .input-container .radio-button:checked+.radio-tile-edit { border: 3px solid black; /* font-size: 12px; */ color: #797979; transform: scale(1.05, 1.05); } <label>Radio button colors:</label> <br> <div class="radio-tile-group"> <div class="input-container"> <label class="radio-tile-label" style="background-color: #b60205;border-radius: 5px;"> <input type="radio" value="#b60205" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #b60205;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #d93f0b; border-radius: 5px;"> <input type="radio" value="#d93f0b" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #d93f0b;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #fbca04; border-radius: 5px;"> <input type="radio" value="#fbca04" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #fbca04;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #0e8a16; border-radius: 5px;"> <input type="radio" value="#0e8a16" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #0e8a16;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #006b75; border-radius: 5px;"> <input type="radio" value="#006b75" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color:#006b75"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #1d76db; border-radius: 5px;"> <input type="radio" value="#1d76db" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #1d76db;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #0052cc; border-radius: 5px;"> <input type="radio" value="#0052cc" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #0052cc;"> </label> </div> </div> <div class="input-container"> <label class="radio-tile-label" style="background-color: #757575; border-radius: 5px;"> <input type="radio" value="#757575" class= "radio-button uncheckall" name="print_color"> <div class="radio-tile-edit" style="background-color: #757575;"> </label> </div> </div> </div>