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

新手上路,请多包涵

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

原文由 catandmouse 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.1k
2 个回答

单选按钮是特定于每个操作系统/浏览器的本机元素。没有办法改变它的颜色/样式,除非你想实现自定义图像或使用包含图像的自定义 Javascript 库(例如 这个- 缓存链接

原文由 Fred 发布,翻译遵循 CC BY-SA 3.0 许可协议

一个快速修复方法是使用 :after 覆盖单选按钮输入样式,但是创建自己的自定义工具包可能是更好的做法。

     input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
 <input type='radio' name="gender"/>
<input type='radio' name="gender"/>

原文由 Jamie 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题