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

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

我们以复选框为例子。
在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;    }

以上代码是为复选框未选中状态设置了宽高,边框背景等样式,注意这里的重点有两个,其一是我们已经讨论过的-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;    }

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

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


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

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

Thanks for reading, see ya next time!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Was ist das Root -Tag in einem HTML -Dokument?Was ist das Root -Tag in einem HTML -Dokument?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itServesasthetop-LevelelementthateCapsulatesAllotherContent, um ProperDocumentStructureandBrowserParsing zu gewährleisten.

Sind die HTML -Tags und Elemente dasselbe?Sind die HTML -Tags und Elemente dasselbe?Apr 28, 2025 pm 05:44 PM

Der Artikel erklärt, dass HTML -Tags Syntaxmarker sind, die zum Definieren von Elementen verwendet werden, während Elemente vollständige Einheiten einschließlich Tags und Inhalt sind. Sie arbeiten zusammen, um Webseiten zu strukturieren.Character Count: 159

Welche Bedeutung hat der Kopf & gt; und & lt; Körper & gt; Tag in HTML?Welche Bedeutung hat der Kopf & gt; und & lt; Körper & gt; Tag in HTML?Apr 28, 2025 pm 05:43 PM

Der Artikel erörtert die Rollen von & lt; Head & gt; und & lt; Körper & gt; Tags in HTML, ihre Auswirkungen auf die Benutzererfahrung und die SEO -Auswirkungen. Die ordnungsgemäße Strukturierung verbessert die Funktionen der Website und die Suchmaschinenoptimierung.

Was ist der Unterschied zwischen & lt; stark & ​​gt;, & lt; b & gt; Tags und & lt; em & gt;, & lt; i & gt; Tags?Was ist der Unterschied zwischen & lt; stark & ​​gt;, & lt; b & gt; Tags und & lt; em & gt;, & lt; i & gt; Tags?Apr 28, 2025 pm 05:42 PM

Der Artikel erörtert die Unterschiede zwischen HTML -Tags, und sich auf ihre semantischen und präsentierenden Verwendungen und ihre Auswirkungen auf SEO und Barrierefreiheit konzentrieren.

Bitte erklären Sie, wie Sie den Zeichensatz angeben, der von einem Dokument in HTML verwendet wird.Bitte erklären Sie, wie Sie den Zeichensatz angeben, der von einem Dokument in HTML verwendet wird.Apr 28, 2025 pm 05:41 PM

In Artikel wird die Angabe der Charaktercodierung in HTML erläutert, die sich auf UTF-8 konzentriert. Hauptproblem: Sicherstellen, dass die korrekte Anzeige des Textes verstümmelt und die SEO und die Zugänglichkeit verbessert werden.

Was sind die verschiedenen Formatierungs -Tags in HTML?Was sind die verschiedenen Formatierungs -Tags in HTML?Apr 28, 2025 pm 05:39 PM

In dem Artikel werden verschiedene HTML -Formatierungs -Tags erörtert, die zur Strukturierung und Styling -Webinhalte verwendet werden, wodurch ihre Auswirkungen auf das Erscheinungsbild von Text und die Bedeutung semantischer Tags für Barrierefreiheit und SEO betont werden.

Was ist der Unterschied zwischen dem Attribut 'ID' und dem Attribut 'Klasse' von HTML -Elementen?Was ist der Unterschied zwischen dem Attribut 'ID' und dem Attribut 'Klasse' von HTML -Elementen?Apr 28, 2025 pm 05:39 PM

Der Artikel erörtert die Unterschiede zwischen den Attributen von HTMLs "ID" und "Klasse" und konzentriert sich auf ihre Einzigartigkeit, ihren Zweck, ihre CSS -Syntax und ihre Spezifität. Es erklärt, wie sich ihre Verwendung auf das Webseite und die Funktionalität des Webseite auswirkt, und bietet Best Practices für

Was ist das Attribut 'Klassen' in HTML?Was ist das Attribut 'Klassen' in HTML?Apr 28, 2025 pm 05:37 PM

Der Artikel erläutert die Rolle des HTML -Class -Attributs bei der Gruppierung von Elementen für Styling und JavaScript -Manipulation und kontrastiert sie mit dem eindeutigen 'ID' -attribut.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung