不支持CSS的单选按钮

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。单选按钮（Radio Button）是一种用户界面元素，允许用户在多个选项中选择一个。

类型

单选按钮通常分为以下几种类型：

标准单选按钮：最基本的单选按钮，用户只能选择一个选项。
自定义单选按钮：通过CSS自定义外观的单选按钮，可以隐藏默认的单选按钮样式，使用伪元素（如::before和::after）来实现自定义图标或样式。

应用场景

单选按钮广泛应用于各种表单中，例如：

用户注册表单中的性别选择。
购物车中的配送方式选择。
设置页面中的选项选择。

遇到的问题及解决方法

问题：不支持CSS的单选按钮

原因：可能是由于浏览器兼容性问题，或者CSS代码编写有误，导致单选按钮无法正确应用CSS样式。

解决方法：

检查浏览器兼容性：确保使用的浏览器支持CSS，并且是最新版本。可以通过Can I use网站检查CSS属性的兼容性。
检查CSS代码：确保CSS代码编写正确，特别是选择器和属性的使用。以下是一个简单的示例，展示如何使用CSS自定义单选按钮的样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Radio Buttons</title>
    <style>
        .radio-container {
            display: inline-block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 22px;
            user-select: none;
        }

        .radio-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
            border-radius: 50%;
        }

        .radio-container:hover input ~ .checkmark {
            background-color: #ccc;
        }

        .radio-container input:checked ~ .checkmark {
            background-color: #2196F3;
        }

        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .radio-container input:checked ~ .checkmark:after {
            display: block;
        }

        .radio-container .checkmark:after {
            top: 9px;
            left: 9px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: white;
        }
    </style>
</head>
<body>
    <label class="radio-container">Option 1
        <input type="radio" checked="checked" name="radio">
        <span class="checkmark"></span>
    </label>
    <label class="radio-container">Option 2
        <input type="radio" name="radio">
        <span class="checkmark"></span>
    </label>
</body>
</html>

参考链接：

通过以上方法，可以有效解决不支持CSS的单选按钮问题，并提升用户界面的美观性和交互性。

页面内容是否对你有帮助？

有帮助

没帮助

使用水豚选择第二个单选按钮

、

当我使用以下代码时，如何从下面的html中选择第二个单选按钮.In页面加载第一个单选按钮<div id="printOpns" class="span6"

浏览 0提问于2013-05-28得票数 8

回答已采纳

2回答

自定义复选框和单选按钮不支持所有浏览器

我在我的项目中使用了自定义复选框和单选按钮，使用的是: all和: after，但是这项工作只在"Google Chrome“中进行，而在其他浏览器中不支持，这就是为什么它在所有浏览器中看起来都是一样的，我不想在复选框或单选按钮后使用标签。CSS在这里：我的单选按钮看起来是这样的：火狐：IE:

浏览 2提问于2017-10-25得票数 2

1回答

我有一个奇怪的问题，我不确定在哪里寻找解决方案。谷歌搜索不会得到任何答案。我有一些CSS来使选定的单选按钮为紫色。很简单，对吧？然而，它是蓝色的。即使CSS在检查器中明显显示为紫色。我从来没有见过它在哪里清楚地使用了正确的CSS，而不是实际呈现。这在多个浏览器上都会发生。，它是蓝色的。使用颜色选择工具，它返回: 0075FF -我认为它是默认的浏览器蓝色。有没有一种方法可以让一些JS运行，或者更

浏览 37提问于2021-11-18得票数 0

1回答

如何选择邻近文本的Capybara中的单选按钮？

、、

capybara方法对于单选按钮工作得很好，该按钮的标签旁边有所需的文本，如下所示：<label但是对于这样的事情：<input type="radio" value="male"

浏览 0提问于2014-10-08得票数 2

2回答

图像而不是单选按钮/文本？

、、、、

我有一个无线电箱选择与9个选项，我想更换按钮和文本旁边的图像。这些选择将显示四种颜色的颜色样本范围：因此，我需要一个箭头的图像旁边的选定选项，然后在它旁边的颜色范围，如果该选项没有被选中，我不需要箭头(或者一个灰色的箭头)。

浏览 3提问于2011-01-04得票数 2

回答已采纳

8回答

HTML单选按钮:隐藏项目符号

、、、、

我希望特定的表单组件充当单选按钮(一次只能选择一个选项)。我不希望无线电项目显示，但是，选择替代的呈现方法，如高光选择，或一些其他方法。这将允许优雅的降级:如果用户浏览器不支持Javascript，它将降级为基本的单选按钮。我希望通过Javascript或CSS隐藏项目符号按钮。有人知道怎么做吗？谢谢。

浏览 51提问于2011-03-02得票数 8

回答已采纳

2回答

现代化基础知识

、

我在我的页面中包含了modernizr，但是如果我不能访问IE6-7浏览器，我如何测试它在IE6-7中工作呢？做一些类似的事情： .accslide { width: 0px; }有没有一种方法可以在不支持CSS3的情况下只加载现代？我如何测试我的CSS选择器上是否可以使用现代？

浏览 0提问于2013-02-22得票数 1

回答已采纳

1回答

根据广播组单击更改样式类

、

我很难解决简单的脚本:当单击单选按钮时，我想更改一个<li>项css类。我创建了一个onclick事件，并将2个参数传递给函数“setColor”。然后，在函数中，我将单击单选按钮的值连接.style。db包动态生成的，与样式相同。我想应用‘正确’风格时，用户单击单选按钮。但不幸的是，我遇到了一个错误："Object不支持属性或方法'getEleme

浏览 2提问于2014-11-04得票数 1

回答已采纳

2回答

我的网站的单选按钮在IE中不起作用

、

我正在尝试设置调查样式，但它在IE6中不起作用悬停在上面很好，但选中的就是不起作用.A label { background-color

浏览 0提问于2013-05-14得票数 2

回答已采纳

1回答

如何在单击选中的单选按钮时清除单选按钮组中选中的单选按钮

、、、

我有两个无线按钮组。 1)包含两个单选按钮2)包含一组单选按钮组，每组包含3个单选按钮我想在单击相同的单选按钮时清除选中的单选按钮，而不使用额外的清除按钮。我需要jQuery代码，因为reactJS不支持javascript，请帮我解决这个问题。我是reactJS编程领域的新手。

浏览 14提问于2019-05-16得票数 0

1回答

单击期间Selenium中的ElementNotVisibleException

、、

radio" name="storageSize" value="128" autocomplete="off">128GB </label> </div></div>print("Storage size: ", btn[1].get_attribute('value')) #pri

浏览 0提问于2018-01-31得票数 0

回答已采纳

2回答

如何设置格式单选按钮的样式

、、、

我的客户想要一个红绿灯样式的审查表。垂直排列的单选按钮，颜色为绿色、黄色和红色。我可以完成对齐，但不能设计按钮的样式。

浏览 2提问于2012-07-31得票数 0

回答已采纳

6回答

如何在radiobutton点击时应用CSS(背景图像)？

、

我有一组单选按钮，如下所示， <inputtime<br /> <input type="radio" NAME="pizzasize" value="4"/>2

浏览 1提问于2011-07-13得票数 1

回答已采纳

4回答

单选按钮没有显示在safari和chrome中。

、

我是一个有限的知识在html和css。如果这是个愚蠢的问题，请原谅。我试过不同的方法，但解决不了这个问题。 <input type="radio" name="preferredcontact" value="E">

浏览 9提问于2016-02-25得票数 9

回答已采纳

2回答

在CSS中控制单选按钮内圆的大小

、、

如何控制单选按钮内暗圆的大小？

浏览 9提问于2021-09-30得票数 0

2回答

更改单选按钮的大小

、、、

单选按钮的大小可以在CSS中更改吗--可以在所有浏览器中更改？我不知道如何做到这一点。如果你知道这是不可能的，请让我知道，这样我就不会浪费我的时间。我还没有研究用于HTML5的CSS3。嗯..。

浏览 0提问于2011-07-27得票数 1

回答已采纳

1回答

ExtJS单选按钮值检索

我需要检索选中的单选按钮的值，并将其作为参数发送到表单。我编写了下面的代码块，但是每次它只是传递第一个值。有人能帮忙吗。

浏览 4提问于2017-09-25得票数 0

回答已采纳

1回答

css可以隐藏未选中的单选按钮吗？或者它是指示器/边框？

、

我试图隐藏无线电按钮的指示器，当它未被检查时。我已经尝试了以下css (一起和单独)： border:none; visibility:hidden;display:none是否可以使用css隐藏指示器输入单选/复选框的圆形边框？

浏览 18提问于2016-09-18得票数 0

3回答

标题中的单选按钮

、

我有一个带有几个单选按钮的标题，可以让用户在不同的列表视图之间进行选择。我不能更改它，所以它在一行中。这四个按钮的宽度大于屏幕尺寸，我无法限制每个输入的宽度。下面是该部分的代码： <div data-role="header" data-theme="b" data-position="fixed" style="height:45px;width:100%tableau&qu

浏览 1提问于2012-07-17得票数 0

回答已采纳

2回答

Selenium发现element_by_id不使用单选按钮

、、

所以我一直在使用Python中的Selenium。我完成了我的代码(这在当时起作用)，但突然它选择不再工作了。找到元素，它的工作方式就像预期的那样。错误只发生在“收音机”类型上，但在每一个类型上都是一致的。由于完整的代码大约有600行长，所以我不打算将其中的每一个代码都更改为XPath。另一个相关信息:由于我正在使用PyCharm，所以我可以返回到以前确实有效的版本。但是现在，它也给了我同样的错误。有人知道这个错误可能与什么有关吗？

浏览 0提问于2018-02-12得票数 2

回答已采纳

点击加载更多