html radio 背景颜色,用纯CSS改变html radio/checkbox默认背景颜色样式

checkbox/ radoi默认不支持更改背景颜色，这里可以使用伪类来实现。基本原理是利用after/ before插入新的元素。而后利用新元素的背景颜色或者背景图片覆盖掉原来的样式。

CSS代码：input[type=checkbox] {

margin-right: 5px;

cursor: pointer;

font-size: 14px;

width: 15px;

height: 12px;

position: relative;

}

input[type=checkbox]:after {

position: absolute;

width: 10px;

height: 15px;

top: 0;

content: " ";

background-color: #ff0000;

color: #fff;

display: inline-block;

visibility: visible;

padding: 0px 3px;

border-radius: 3px;

}

input[type=checkbox]:checked:after {

content: "?";

font-size: 12px;

}

input[type=radio] {

margin-right: 5px;

cursor: pointer;

font-size: 14px;

width: 15px;

height: 12px;

position: relative;

}

input[type=radio]:after {

position: absolute;

width: 10px;

height: 15px;

top: 0;

content: " ";

background-color: #ff0000;

color: #fff;

display: inline-block;

visibility: visible;

padding: 0px 3px;

border-radius: 50%;

}

input[type=radio]:checked:before {

content: "?";

display: block;

position: relative;

top: -2px;

left: 3px;

width: 6px;

height: 6px;

color: #fff;

font-weight: 400;

z-index: 1;

}

HTML 示例：plus

minus

plus

minus

对前台的技术，架构技术感兴趣的同学关注我的头条号，并在后端私信发送关键字：“前端”就可加入前台大佬交流裙

html radio 背景颜色,用纯CSS改变html radio/checkbox默认背景颜色样式相关推荐

html改变复选框颜色,用纯CSS改变html radio/checkbox默认背景颜色样式
checkbox/ radoi默认不支持更改背景颜色,这里可以使用伪类来实现.基本原理是利用after/ before插入新的元素.而后利用新元素的背景颜色或者背景图片覆盖掉原来的样式. CSS代码: ...
html radio 默认图片替换_用纯CSS改变html radio/checkbox默认背景颜色样式
checkbox/ radoi默认不支持更改背景颜色,这里可以使用伪类来实现.基本原理是利用after/ before插入新的元素.然后利用新元素的背景颜色或背景图片覆盖掉原来的样式. CSS代码: ...
修改svg图片的颜色html,通过CSS改变svg image引入的图片颜色？
在html元素中通过background设置图片icon,然后通过css3的filter滤镜的drop-shadow 设置阴影来呈现这种改变图片颜色的效果.很不错的方法. 但是我现在的元素是在svg中 ...
html改变复选框颜色,如何利用纯CSS改变html？radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...
html select 样式t调整_用纯css改变下拉列表select框的默认样式
**社区评论 ( Beta版 )** #0 危汤讽 2015-04-02 09:57:05 firefox浏览器支持不好,貌似是浏览器bug 回复 #1 林甩土 2015-04-03 09:06:57 ...
html中改变一张图片的颜色,简单的 css 改变图片颜色
当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面切图网教你,怎么用简单的css改变图片的颜色. 熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mi ...
html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
自定义常用input表单元素二：纯css实现自定义radio单选按钮
这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...
用纯css改变下拉列表select框的默认样式
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切 ...

html radio 背景颜色,用纯CSS改变html radio/checkbox默认背景颜色样式

html radio 背景颜色,用纯CSS改变html radio/checkbox默认背景颜色样式相关推荐

最新文章

热门文章