如何更改单选按钮的颜色?

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

当前回答

只有当你的目标是基于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;
}

2010-11-23 08:25:24

其他回答

一个聪明的方法是创建一个单独的div，高度和宽度为-例如- 50px，然后半径为50px，将其放在单选按钮上…

2018-11-21 18:58:24

简单来说，可以用重音色

查看页面来源

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input[type=radio] {
            accent-color: red;
        }
    </style>
</head>
<body>
    <label for="css">Are you like to css</label>
    <input type="radio" id="css" value="css">
</body>
</html>

2022-04-23 15:36:47

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

2010-11-23 08:25:59

你可以使用CSS的重音颜色属性来改变颜色。

input[type='radio'] {
    accent-color: #232323;
}

它适用于Chrome/Edge 93+， Firefox 92+和Safari 15.4+(浏览器支持信息来自caniuse。)

2021-09-13 23:01:45

正如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。

2016-07-19 20:52:44

如何更改单选按钮的颜色?

推荐文章

最新文章

标签