自定义input单选框样式

表单中input[type=“radio”]的样式在不同的浏览器中表现也不一样，如果直接对单选按钮设置样式的话，没有多少样式能够对单选按钮起作用。
为了用户体验或者需要更改单选按钮的样式可使用此方法：
一般使用单选按钮会搭配<label>元素使用并将关联起来，可以为<label>元素添加生成伪元素，并基于单选按钮的状态来为其设置样式，并将真正的按钮隐藏

1.一个基本的单选按钮

    <div><input type="radio" id="girl" name="sex" /><label for="girl">女</label><input type="radio" id="boy" name="sex" /><label for="boy">男</label></div>

此时的样式

2.生成一个伪元素，设置自己想要的样式

    <style>input[type="radio"]+label::before {content: "\a0";/*不换行空格*/display: inline-block;vertical-align: middle;font-size: 18px;width: 7px;height: 7px;margin: auto 5px;border-radius: 50%;border: 1px solid gray;padding: 4px;}/* 设置选中样式 */input[type="radio"]:checked+label::before {background-color: gray;background-clip: content-box;padding: 4px;}</style>

添加以上代码后的样式

3.隐藏原来的单选按钮

        input[type="radio"] {position: absolute;clip: rect(0, 0, 0, 0);}

效果为：

自定义input单选框样式相关推荐

html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
input选择框样式修改与自定义
html自带的选择框样式不好看,并且在ios设备上丑的罚款.所以一般都是自定义样式: 原理:将原来默认的input选择框隐藏,然后控制label的:before与:after,配合矢量图标或者图片来实 ...
html5 input搜索框样式修改,修改input搜索框默认叉号的样式为自定义图片
兼容IE的自定义input搜索框叉号样式(使用图片替换input原生叉号) 代码 input::-webkit-search-cancel-button { -webkit-appearance: n ...
MUI 如何更改单选框样式
自定义修改 MUI 单选框的默认样式效果图,对比示下: 以上图效果为例: 修改前代码:[参考mui.min.css ] 修改后代码如下:.mui-radio input[type=radio]:ch ...
css自定义下拉框样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html改变单选形状,用css实现html中单选框样式改变
我们都知道,input的单选框是一个小圆框,不能直接更改样式.但是我们在很多网页中看到的单选框样式可不仅限于默认的那个样式(看上去没啥新意,也比较丑).那么,接下来我将介绍下如何实现该功能. 首先,让 ...
input单选框复选框点选不上选不中
今天在项目中遇到了一个问题,问题是什么呢? 就是:input单选框.复选框点选不上问题.选不中问题? input单选框.复选框点选不上问题.选不中问题的效果图如下: 解决 input单选框.复选 ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
html input文本框样式,css设置input文本框样式代码实例_html/css_WEB-ITnose
css设置input文本框样式代码实例: 使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如 ...

自定义input单选框样式

自定义input单选框样式

自定义input单选框样式相关推荐

最新文章

热门文章