使用css设置输入单选按钮的样式
使用CSS设置输入单选按钮的样式可以通过以下几种方式实现：
- 使用伪类选择器（:checked）来改变选中状态的样式：
- 使用伪类选择器（:checked）来改变选中状态的样式：
- 使用伪类选择器（:before或:after）来添加自定义样式：
- 使用伪类选择器（:before或:after）来添加自定义样式：
- 使用背景图片来替代默认的单选按钮样式：
- 使用背景图片来替代默认的单选按钮样式：
- 使用自定义字体图标来替代默认的单选按钮样式：
- 使用自定义字体图标来替代默认的单选按钮样式：
以上是几种常见的设置输入单选按钮样式的方法，具体选择哪种方法取决于需求和设计风格。腾讯云提供的相关产品和产品介绍链接地址请参考腾讯云官方文档或咨询腾讯云客服。
相关·内容
3回答
单选按钮背景图像
html、css
我已经给了单选按钮bg图像。它可以在chrome中工作，但不能在mozilla中工作。
以下是我的代码
<div class="fieldlist">
<label for="shipadd2">
<input type="radio" id="shipadd2" name="address" />
<div class="compacttext"> Lorem ipsum </div>
</l
浏览 0提问于2012-06-29得票数 10
回答已采纳
1回答
CSS -moz-不适用于单选按钮
html、css
我正在设计一些单选按钮，但这种样式并不适用于。
这是css
input[type="radio"] {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
display:inline-block;
width:25px;
height:25px;
浏览 3提问于2015-04-27得票数 0
回答已采纳
问题:在绿色hover state下面的简化示例中，当鼠标定位在输入单选按钮和标签上时，可以正常工作。但是，虽然当鼠标单击单选按钮时黄色active state按预期工作，但当鼠标单击标签时它不会触发。当鼠标单击标签时，单选按钮就会保持绿色。在Chrome、Edge和Opera中也是如此。有趣的是，只有火狐浏览器才能像我预期的那样使用单选按钮。
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: no
浏览 3提问于2022-06-24得票数 1
回答已采纳
1回答
可以使单选按钮看起来像chekbox，没有图像吗？
html、css
好吧，我正在尝试让一些单选按钮看起来像复选框，但我读过的所有提示都告诉我必须使用复选框的图像。我对此并不满意，所以需要知道是否有任何方法可以在不将任何图像链接到单选按钮的情况下做到这一点。
input[type=radio].checkbutton {
margin-top: 2px;
appearance: checkbox!important;
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
color: #717170!important;
border: 2px #acacac solid!i
浏览 0提问于2021-02-18得票数 0
1回答
使用图像在bootstrap3中自定义单选按钮
html、css、twitter-bootstrap、twitter-bootstrap-3
我正在尝试使用两个不同的图像定制一个单选按钮。一次如果不检查，一次检查。html是
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="options" value="1"/>1
</label>
</div>
</div>
我正在尝试使用下面的css，但没有结果。
.radio input[
浏览 4提问于2016-06-01得票数 1
回答已采纳
1回答
单选按钮css和IE9
html、css、forms、webforms
你好，我一直在尝试使用自定义单选按钮，下面是我的css。我已经用两个浏览器( IE9和Google )检查了它，它运行得很好，但是在ie9上，我提到的单选按钮不显示，请让我知道如何修复下面的css，这样它也可以在ie9上工作。
input[type="radio"] {
background:url('images/radio_Checked.jpg');
padding:0;
width:10px;
height:10px;
display: inline-block;
appearance:none;
-moz-appearance:none;
-webki
浏览 3提问于2012-06-09得票数 0
1回答
用户如何才能点击隐藏的输入域？
html、css
css3 :checked如何处理隐藏元素？
我找到了自定义的复选框和单选按钮。
其中首先将单选按钮设置为隐藏：
input[type=radio]{display: none;}
并为标签应用:before pseudo元素，使其像单选按钮一样出现在标签之前。
但现在，在用户选中该按钮后，将应用以下css来显示选中。
input[type=radio]:checked + label:before{
所以，现在我的问题是，单选按钮是如何被用户检查和取消检查的，其中示例对单选按钮使用了display: none，因此没有创建伪元素，而只是为之前的标签创建了伪元素，并使用input[type=r
浏览 1提问于2014-05-26得票数 1
1回答
自定义CSS不适用于单选按钮选择FF/ IE
html、css、jsf-2.2
我使用自定义css来设置单选按钮的样式，如下所示：
input[type="radio"] {
display: none;
}
input[type="radio"]{
display: inline-block;
width:19px;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 50%;
outline:none;
border
浏览 4提问于2015-10-23得票数 1
3回答
单选按钮的可访问性
html、css
单击单选按钮的第一个和第二个值可选择第一个选项。HTML：
@supports(-webkit-appearance: none) or (-moz-appearance: none) {
input[type='radio'],
input[type='checkbox'] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
input[type="radio"] {
top: 0;
left
浏览 14提问于2021-05-31得票数 0
回答已采纳
1回答
背景色样式不起作用
css
input[type="radio"] + label:before {
display: inline-block;
border: 1px solid #999;
border-radius: 15px;
content: "";
height: 20px;
width: 20px;
-webkit-appearance: none;
}
input[type="radio"]:checked + label:before {
background-color: #00ff00
浏览 2提问于2015-04-12得票数 2
4回答
创建带有平滑圆圈的单选按钮
html、css
我有一个单选按钮，它看起来像这个
问题是外圆虽然不是平滑的。我的意思是，很明显，圆的轮廓是不连续的，并且里面有空格。
如果没有空格，我怎样才能使这个圆完全成圆形呢？
这是html
<input type='radio' name='a' checked/>
<input type='radio' name='a'/>
这是css3
input[type='radio'] {
-webkit-appearance:none;
width:20px;
height:20p
浏览 24提问于2017-03-15得票数 3
1回答
带有-webkit样式的单选按钮-外观:复选框: Chrome中的不确定状态
javascript、jquery、html、css、google-chrome
我们的网站上有一个选择题，Django将表单作为单选按钮。做出这种决定的人希望单选按钮成为复选框，所以我们用webkit-appearance: checkbox;对它们进行了样式设计。除了Chrome之外，在所有浏览器中，这看起来都不错。Chrome在不确定状态下呈现复选框(中间有一行)。
有没有办法让Chrome将它们呈现为未检查的状态？
如果是这样的话，我将在Django中自定义表单小部件，但现在我想用CSS或JS进行定制。
注意:您可以在这里看到这种行为：
input[type="radio"] {
-webkit-appearance: checkbox;
浏览 3提问于2015-01-27得票数 0
回答已采纳
1回答
单选按钮内不能对大点进行居中
css、radio-button
我试图把这个点放在单选按钮内，这是一种累人的工作，因为我不知道该做什么。
我最后的作品应该是这样的：
我得到的是：
我的代码：
input[type='radio'] {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
outline: none;
border: 1px solid #99AFC1;
}
input[type='radio']:before {
content: '';
di
浏览 3提问于2019-11-10得票数 1
回答已采纳
2回答
Mozilla Firefox输入单选按钮样式和默认设置
css、forms、firefox、cross-browser
我的页面上有各种form元素，但是火狐中的输入单选按钮有问题。单选按钮在Safari和Chrome中显示得很好，但在Firefox中则完全不同(圆形而不是方形！)和are :默认情况下检查，这也是一个问题。
从我的研究来看，广泛推荐使用-moz外观，但在这种情况下，我找不到任何与我的查询直接相关的答案。任何帮助都将不胜感激。
标记
<form>
<label class="radio" for="#">One</label>
<input type="radio">
<
浏览 4提问于2015-05-06得票数 1
回答已采纳
1回答
IE单选按钮隐藏不起作用
html、css、internet-explorer、radio-button
这段代码可以在Chrome中运行，但是默认的单选按钮在IE中显示在样式之上。
在IE中，单选按钮不会被隐藏。下面是代码。
input[type=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 15px !important;
height: 15px !important;
border: 3px solid #999999 !important;
border-radius: 50% !important;
outline: none !i
浏览 3提问于2016-07-26得票数 0
回答已采纳
1回答
在Windows 8 Metro中，是否可以设置单选按钮的选中状态？
css、windows-8、microsoft-metro、radio-button、winjs
我已经成功地在Metro中设置了单选按钮的标准外观样式
input[type=radio]::-ms-check {
border: none;
background: transparent url('myImage.png');
}
的活动状态。
input[type=radio]::-ms-check:active {
border: none;
background: transparent url('myActiveImage.png');
}
但我无论如何也想不出如何设置选中状态的样式。显而易见的选择不起作用：
浏览 0提问于2012-11-06得票数 1
回答已采纳
1回答
如何设置输入复选框选中箭头的样式？Css
html、css、sass
我已经创建了一个span &一个input复选框，但是我不知道如何根据复选框所在的给定设计来设置选中箭头的样式： ? HTML： <label class="form-label">
<input id="checkbox" type="checkbox">
<span>title</span>
</label> CSS： .form-label {
display: inline-flex;
cursor: pointer;
po
浏览 23提问于2020-07-15得票数 1
3回答
如何提高我的CSS单滑块菜单的跨浏览器兼容性？
html、css、google-chrome
我有一个css只菜单，背景色必须与动画幻灯片到选定的菜单项：
.wrapper {
font: 0/0 a;
position: relative;
white-space: nowrap;
}
.radio {
-webkit-appearance: none;
color: rgb(0, 0, 0);
margin: 0 10px 0 0;
outline: 0;
padding-bottom: 10px;
padding-top: 10px;
position: relative;
text-align: center;
tr
浏览 10提问于2014-11-19得票数 1
3回答
无线输入样式不适用于firefox
html、css、firefox
因此，我已经使用下面的css设置了我的无线输入的样式。然而，在Firefox中，出现了一个完全不同的电台，我根本无法设计它的样式。
它在safari和chrome上运行得很好，但我似乎不明白为什么它在火狐上不能工作。
input[type=checkbox] {
border: 0px;
cursor: pointer;
height: 20px;
margin: 0px 10px 0px 0px;
position: relative;
overflow: hidden;
vertical-align: -5px;
width: 20px
浏览 2提问于2015-07-15得票数 3
1回答
如何从复选框中删除行？
jquery、html、css、radio-button
我正面临着一个问题。我有四个单选按钮，但是我用复选框改变了它的外观。它们实际上是单选按钮，但看起来像复选框。问题出在google chrome上。但是在firefox中正常工作的人可以帮助我吗？以下是我的代码：
input[type="radio"].custom-radio {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
-ms-appearance: checkbox; /* not currently supported */
-o-appearance: c
浏览 0提问于2016-11-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
