CSS 伪类修改input选中样式的示例代码
发布时间：2020-07-21 14:56:31 作者：返回主页彼时今日 
我要评论
我要评论这篇文章主要介绍了CSS 伪类修改input选中样式的示例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
注：该表引自W3School教程
伪元素的分类及作用：
下面通过代码看下CSS 伪类修改input选中样式的示例代码，代码如下所示：
主要是用到了after伪类和字体符号。
input{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
}
input:after{
content: "";
font-size: 18px;
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
text-align: center;
border: 1px solid #666fff;
vertical-align: bottom;
}
input:checked:after{
content: "\2714";
}
效果如下：
到此这篇关于CSS 伪类修改input选中样式的文章就介绍到这了,更多相关css input 选中样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解css3中的伪类before和after常见用法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-17
这篇文章主要介绍了CSS伪类:empty让我眼前一亮，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-03
这篇文章主要介绍了浅谈CSS 伪元素&伪类的妙用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-09-01
这篇文章主要介绍了css伪类 右下角点击出现 对号角标表示选中，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-22- 这篇文章主要介绍了css选择器四大类：基本、组合、属性、伪类的相关知识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-14
这篇文章主要介绍了详解如何使用CSS3中的结构伪类选择器和伪元素选择器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面2020-01-06
这篇文章主要介绍了解决移动端跳转问题(CSS过渡、target伪类)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2019-10-10
如果说 css 作为前端开发的基本功, 那么 "选择器" 就是基础中的基础，本文介绍了css3 伪类选择器快速复习，文中通过示例代码介绍的非常详细，对大家的学习或者工2019-09-10- 这篇文章主要介绍了CSS新增的:where和:is伪类函数是什么的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-15
最新评论