Table of Contents
首先引入font-awesome的css文件,不多说。
然后我们先把这个复选框“未选中状态”设置样式:
接下来我们来定义“选中”的样式,我们可以通过:before或者:after伪元素实现。
Home Web Front-end HTML Tutorial 利用纯CSS3定制单选/多选框样式_html/css_WEB-ITnose

利用纯CSS3定制单选/多选框样式_html/css_WEB-ITnose

Jun 24, 2016 am 11:29 AM

在前端开发中,往往需要对默认元素的样式进行修改。然而有的元素却不是那么容易就能找到它所对应的样式的,今天要讨论的重点内容就是以及这两款默认表单元素的样式修改问题。

我们以复选框为例子。
在webkit内核浏览器如chrome中,复选框未选中的默认样式如下图:

选中以后如下图:

嗯,是挺丑的……
如果我们想对它进行样式的修改,应该怎么办呢?按照常规,我们现查看一下它的默认样式都有一些什么属性:

在user agent stylesheet,也就是浏览器的默认样式里面,它的属性并不复杂,都是我们常见的内容。我们可以通过覆盖这些样式去修改它的大小,颜色,边框等等。但是它中间的钩子,似乎并没有能够直接覆盖修改的样式。真的是这样吗?

我们注意到,有一个比较不常见的属性,-webkit-appearance,直译过来就是“webkit的样子”,似乎和webkit内核浏览器的样式定制有关?我们现了解一下这是啥属性。在w3cschool里面,我们可以看到下面的解释:

定义和用法
appearance 属性允许您使元素看上去像标准的用户界面元素。
默认值: normal
继承性: no
版本: CSS3 JavaScript
语法: object.style.appearance="button"

浏览器支持
所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

appearance: normal|icon|window|button|menu|field;

和猜想的一样,它确实和样式的定制有关。但是解释里面只摘录了“把某元素变成另外一种元素的样子”,却没有告诉我们怎样才能“把复选框里面的√”变成“×”。
别急,我们先试一下修改这个属性:

简单粗暴的把样式直接设置为none,看看效果:

它不见了!!
等等,这是不是可以意味着,我们可以对它进行(惨无人道的)完全的自定义样式呢?比如我们想把它默认的“√”变成别的东西。
font-awesome是一套很漂亮的字体图标,现在我想把它的图标放在这个复选框里面。

首先引入font-awesome的css文件,不多说。

然后我们先把这个复选框“未选中状态”设置样式:

input[type=checkbox] {        display: inline-block;        height: 20px;        width: 20px;        border: 1px solid #000;        overflow: hidden;        vertical-align: middle;        text-align: center;        -webkit-appearance: none;        font: normal normal normal 14px/1 FontAwesome;        outline: 0;        background: 0 0;    }
Copy after login

以上代码是为复选框未选中状态设置了宽高,边框背景等样式,注意这里的重点有两个,其一是我们已经讨论过的-webkit-appearance,把它设置为none的原因就是把它整个抹掉,我自己来画的意思。其二是font: normal normal normal 14px/1 FontAwesome,它为这个复选框定义了字体属性,为接下来的引用font-awesome作前提。
现在它长这样:

接下来我们来定义“选中”的样式,我们可以通过:before或者:after伪元素实现。

因为我们已经把它利用-webkit-appearance把所有样式都抹除了,包括中间的“√”,所以我们完全可以自己画一个,伪元素是非常好用的一个方法。

input[type=checkbox]:checked:after {        content: '\f00c';        font-size: 15px;        text-align: center;        line-height: 17px;        color: #000;    }
Copy after login

这里的content: '\f00c'是来自font-awesome的图标字体编号,具体的查找可以到其官网,或者简单粗暴地在官网例子中打开控制台查看,比如这样:

走到这一步,我们已经大功告成了,赶快来看看效果!


美美哒!
到此,我们完成了全部的通过纯CSS3为默认复选框设置样式的任务。
其他的如按钮,单选框同理~
由于时间有限,暂时未在火狐和Safari浏览器测试,如果有测试过的同学欢迎在楼下评论交流哈!由于兼容性有限,这个定制的方案可作为参考,具体的使用还是得看场合需求。

欢迎关注我的个人前端技术博客:http://jrainlau.github.io/

Thanks for reading, see ya next time!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS, and JavaScript: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

See all articles