更改单选按钮的背景颜色

2023-10-20前端开发问题
38

本文介绍了更改单选按钮的背景颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

是否可以像在 IE 中一样更改 Firefox/Chrome 中单选按钮输入的背景颜色?(不使用图片)

Is it possible to change the background color of a radio button input in Firefox/Chrome like in IE? (Without using images)

在 IE(<9) 和 Firefox/Chrome 中运行:

Run this in both IE(<9) and Firefox/Chrome:

input[type="radio"] {
  background: red;
}

<input type="radio" /> RadioButton

查看JSFiddle

推荐答案

简短的回答是不".

即使您确实设法获得了在一个浏览器中运行的东西,浏览器对表单控件的处理方式也往往截然不同,这意味着几乎不可能实现跨浏览器兼容性.

Even if you do manage to get something that works in one browser, browsers tend to handle form controls very differently, meaning it's nigh impossible to achieve cross-browser compatibility.

令人失望,我知道.查看这篇文章了解更多信息:http://www.456bereastreet.com/archive/200409/style_form_controls/

Disappointing, I know. Check out this article for more info: http://www.456bereastreet.com/archive/200409/styling_form_controls/

顺便问一下,为什么要更改背景颜色?通常,单选按钮背景只会选取其容器的背景颜色.

Just by the way, why do you want to change the background color? Generally a radio button background will just pick up the background color of its container.

这篇关于更改单选按钮的背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

缩放背景图像以适合 ie8 窗口
Scale background image to fit ie8 window(缩放背景图像以适合 ie8 窗口)...
2024-04-19 前端开发问题
11

IE7 (IETEster) 中的@fontface 无法正常工作
@fontface in IE7 (IETEster) not working properly(IE7 (IETEster) 中的@fontface 无法正常工作)...
2024-04-19 前端开发问题
9

Safari 5.1 打破 CSS 表格单元格间距
Safari 5.1 breaks CSS table cell spacing(Safari 5.1 打破 CSS 表格单元格间距)...
2024-04-19 前端开发问题
3

如何使用 `on()` 委托 `hover()` 函数
How to delegate `hover()` function by using `on()`(如何使用 `on()` 委托 `hover()` 函数)...
2024-04-19 前端开发问题
17