文章/答案/技术大牛

发布

css单选按钮美化

CSS 单选按钮美化

基础概念

CSS 单选按钮美化是指通过 CSS 样式来改变 HTML 中单选按钮（<input type="radio">）的外观，使其更加美观和符合设计需求。单选按钮通常用于在一组选项中选择一个。

类型

基础样式：改变单选按钮的大小、颜色、边框等基本属性。
伪元素：使用 ::before 和 ::after 伪元素来创建自定义图标或背景。
隐藏原生按钮：通过 CSS 隐藏原生单选按钮，使用其他元素（如 <label>）来模拟单选按钮的行为。

应用场景

表单设计：在用户注册、登录、设置等表单中使用。
数据筛选：在数据展示页面中，用于筛选不同类别的数据。
选项选择：在配置页面中，用于选择不同的配置选项。

示例代码

以下是一个简单的示例，展示如何使用 CSS 美化单选按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Radio Button Styling</title>
    <style>
        .radio-container {
            display: flex;
            align-items: center;
        }
        .radio-container input[type="radio"] {
            display: none;
        }
        .radio-container label {
            position: relative;
            padding-left: 30px;
            margin-right: 15px;
            cursor: pointer;
        }
        .radio-container label::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
        }
        .radio-container input[type="radio"]:checked + label::before {
            background-color: #007bff;
            border-color: #007bff;
        }
        .radio-container input[type="radio"]:checked + label::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 6px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="radio-container">
        <input type="radio" id="option1" name="options" value="1">
        <label for="option1">Option 1</label>
    </div>
    <div class="radio-container">
        <input type="radio" id="option2" name="options" value="2">
        <label for="option2">Option 2</label>
    </div>
</body>
</html>

参考链接

常见问题及解决方法

单选按钮功能失效：确保隐藏原生单选按钮时，使用 <label> 标签正确关联单选按钮的 id 和 for 属性。
单选按钮功能失效：确保隐藏原生单选按钮时，使用 <label> 标签正确关联单选按钮的 id 和 for 属性。
单选按钮功能失效：确保隐藏原生单选按钮时，使用 <label> 标签正确关联单选按钮的 id 和 for 属性。
样式不一致：确保所有单选按钮的样式一致，特别是在使用伪元素时。
样式不一致：确保所有单选按钮的样式一致，特别是在使用伪元素时。
可访问性问题：确保隐藏原生单选按钮时，仍能通过键盘操作和屏幕阅读器访问。
可访问性问题：确保隐藏原生单选按钮时，仍能通过键盘操作和屏幕阅读器访问。

通过以上方法，可以有效地美化单选按钮，并确保其功能性和可访问性。

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

有帮助

没帮助

如何使用切换按钮而不是复选框/单选按钮？

javascript、jquery、html、css

如何使用开关代替复选框和单选按钮，如图像所示，以美化网站设计。

浏览 3提问于2014-04-16得票数 0

回答已采纳

2回答

jQuery移动按钮组:如何对完整的垂直组进行居中？

css、jquery-mobile

我现在试着美化我的资料来源。为此，我希望将按钮和单选按钮的宽度更改为80%，并将对齐更改为中心。对于按钮，我做的css设置非常好，但我不能集中单选按钮组。><a href="#settings" data-role="button" id="buton" class="activeOnce">Button<

浏览 1提问于2013-08-30得票数 1

回答已采纳

1回答

我需要一个jQuery样式器(也叫form skinner)来美化所有的输入类型

javascript、jquery、html、css、ajax

我需要一个所有在一个jQuery输入型样式，美化选择框，单选按钮，复选框，文本框，文本框，多选，文件输入等。我正在大力搜索，但我得到的都不适合的情况。其中一些很方便，但验证引擎对它们不起作用，一些不支持ajax页面的美化，一些不允许美化他们的下拉列表，一些插件只提供美化选择框。请给我推荐一个插件。

浏览 0提问于2014-01-23得票数 0

5回答

jquery无法以编程方式设置prettyCheckable插件单选按钮

jquery、radio-button

我使用jquery jquery插件使我的复选框和单选按钮看起来很漂亮，如果我使用prettyCheckable设置属性checked，它不会工作，因为插件隐藏了实际的checkbox，并使它自己覆盖HTML来美化复选框/单选按钮，因此当我选中单选或复选框时，jquery无法识别 //单击按钮时，我尝试了所有方法，但都不起作用。

浏览 1提问于2013-08-25得票数 5

2回答

在无线按钮jQuery中传递数组值

javascript、jquery

我有一个jQuery函数来美化单选按钮，除非在一种情况下，该按钮的name属性包含括号内的数组值。这是针对通过单选按钮具有可选择选项的购物车系统，因此按钮看起来如下所示：<input type="radio

浏览 5提问于2014-03-25得票数 1

回答已采纳

1回答

单击期间Selenium中的ElementNotVisibleException

python、html、selenium

storageSize']")btn[1].click()ElementNotVisibleException: Message: element not visible (Session info: chrome=62.0.3202.75

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

回答已采纳

2回答

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

css、ruby-on-rails、radio-button、formtastic

垂直排列的单选按钮，颜色为绿色、黄色和红色。我可以完成对齐，但不能设计按钮的样式。

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

回答已采纳

4回答

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

html、css

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

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

回答已采纳

6回答

具有吸引人的css3属性的模拟按钮

css

我不擅长css，但已经创建了css按钮看起来相当不错。这是我的小提琴演示：是

浏览 10提问于2013-11-01得票数 1

回答已采纳

2回答

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

html、css、reactjs

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

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

2回答

更改单选按钮的大小

html、css、size、radio-button

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

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

回答已采纳

1回答

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

css、input

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

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

2回答

Selenium发现element_by_id不使用单选按钮

python、selenium、radio-button

所以我一直在使用Python中的Selenium。我完成了我的代码(这在当时起作用)，但突然它选择不再工作了。具体来说:如果我尝试：它会返回错误： selenium.common.exceptions.ElementNotInteractableException: Message: Element <input id="leasingfalse" name="IsLeasing" type="radio"> could

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

回答已采纳

3回答

标题中的单选按钮

html、jquery-mobile

我有一个带有几个单选按钮的标题，可以让用户在不同的列表视图之间进行选择。我不能更改它，所以它在一行中。这四个按钮的宽度大于屏幕尺寸，我无法限制每个输入的宽度。tableau" value="tableau" </fieldset></div> CSS

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

回答已采纳

1回答

分组多个RadioButton列表

html、asp.net、controls、radiobuttonlist

我的页面上有几个单选按钮列表，每个列表都在不同的类别下列出项目，因此它们在不同的标题下列出。但是，我只希望在所有列表中选择一个项目。

浏览 2提问于2011-09-15得票数 1

2回答

如何在不检查时改变角垫单选按钮的颜色

angular、angular-material

如何改变颜色垫-单选按钮，当不检查.我一直在寻找答案，我想知道这是否可能不改变整个主题。在CSS中:吴-深。垫-收音机-什么？

浏览 3提问于2022-07-05得票数 0

1回答

Breadcrumb活动链接css

html、css、breadcrumbs

这是我想要的面包屑设计，但是如何让激活的css具有箭头效果，就像它是如何在悬停时工作的

浏览 3提问于2012-07-18得票数 0

回答已采纳

4回答

不能在HTML输入电台上应用CSS

html、css

Css background: red;}<input type="radio" class="techRadio"

浏览 5提问于2014-02-09得票数 0

1回答

如何在带有钩子的ReactJS中使用复选框作为单选按钮？

javascript、reactjs

CSS不是问题所在，我已经用vanilla做过了： var checkboxes = document.getElementsByName

浏览 15提问于2020-03-06得票数 0

1回答

Symfony在CollectionType上形成链接无线电按钮

php、symfony、symfony-forms、symfony-3.4

label' => 'admin.question.form.answers.correct',} 这仅仅是两个表单元素，一个答案的输入字段和一个指示答案是正确还是错误的无线电按钮我想渲染这四个答案字段，每一个在结尾一个无线电按钮，以表明正确的答案。不幸的是，这些无线电按钮没有连接，每个都属于它自己的收藏。每个无线电按钮都是可选的，所以每个答案都可以被选择为正确的。

浏览 1提问于2018-06-21得票数 0

点击加载更多