只有当你的目标是基于webkit的浏览器(Chrome和Safari，也许你正在开发Chrome WebApp，谁知道…)，你可以使用以下:

input[type='radio'] {
   -webkit-appearance: none;
}

然后将其设置为一个简单的HTML元素，例如应用背景图像。

使用input[type='radio']:active用于选择输入时，提供备用图形

更新:截至2018年，您可以添加以下内容以支持多个浏览器供应商:

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

我构建了@klewis的代码样本的另一个分支，通过使用:before/:after伪元素和隐藏的单选输入按钮来演示纯css和渐变。

HTML:

sample radio buttons:
<div style="background:lightgrey;">
    <span class="radio-item">
        <input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
        <label for="ritema">True</label>
    </span>

    <span class="radio-item">
        <input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
        <label for="ritemb">False</label>
    </span>
</div>

:

CSS:

.radio-item input[type='radio'] {
    visibility: hidden;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 5px;
    padding: 0;
}
    .radio-item input[type=radio]:before {
        position: relative;
        margin: 4px -25px -4px 0;
        display: inline-block;
        visibility: visible;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 2px inset rgba(150,150,150,0.75);
        background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
        content: "";
    }
        .radio-item input[type=radio]:checked:after {
            position: relative;
            top: 0;
            left: 9px;
            display: inline-block;
            visibility: visible;
            border-radius: 6px;
            width: 12px;
            height: 12px;
            background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            content: "";
        }
            .radio-item input[type=radio].true:checked:after {
                background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            }
            .radio-item input[type=radio].false:checked:after {
                background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
            }
.radio-item label {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    margin: 0;
    padding: 0;
}

预览: https://www.codeply.com/p/y47T4ylfib

正如Fred提到的，没有办法在颜色、大小等方面对单选按钮进行本地样式设置。但是您可以使用CSS Pseudo元素来设置任意给定单选按钮的冒名顶替者，并对其进行样式化。谈到JamieD所说的，关于我们如何使用:after Pseudo元素，您可以同时使用:before和:after来实现理想的外观。

这种方法的好处:

Style your radio button and also Include a label for content. Change the outer rim color and/or checked circle to any color you like. Give it a transparent look with modifications to background color property and/or optional use of the opacity property. Scale the size of your radio button. Add various drop shadow properties such as CSS drop shadow inset where needed. Blend this simple CSS/HTML trick into various Grid systems, such as Bootstrap 3.3.6, so it matches the rest of your Bootstrap components visually.

简短演示说明如下:

Set up a relative in-line block for each radio button Hide the native radio button sense there is no way to style it directly. Style and align the label Rebuilding CSS content on the :before Pseudo-element to do 2 things - style the outer rim of the radio button and set element to appear first (left of label content). You can learn basic steps on Pseudo-elements here - http://www.w3schools.com/css/css_pseudo_elements.asp If the radio button is checked, request for label to display CSS content (the styled dot in the radio button) afterwards.

HTML

<div class="radio-item">
    <input type="radio" id="ritema" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

一个简短的演示，看看它的行动

总之，不需要JavaScript，图像或电池。纯CSS。

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

简单的跨浏览器自定义单选按钮的例子

.checkbox input{ display: none; } .checkbox input:checked + label{ color: #16B67F; } .checkbox input:checked + label i{ background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg'); } .checkbox label i{ width: 15px; height: 15px; display: inline-block; background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%; background-size: 12px; position: relative; top: 1px; left: -2px; } <div class="checkbox"> <input type="radio" name="sort" value="popularity" id="sort1"> <label for="sort1"> <i></i> <span>first</span> </label> <input type="radio" name="sort" value="price" id="sort2"> <label for="sort2"> <i></i> <span>second</span> </label> </div>

https://jsfiddle.net/kuzroman/ae1b34ay/

您可以在无线电输入中嵌入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;
}

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