CSS复选框样式高级自定义

该CSS网格布局模块,不仅可以解决的布局问题的一个庞大的,而且我们一直在一些很好的旧顽强问题处理时间长,如造型复选框标签。 虽然没有样式的标签时,它会出现一个相对简单的方法后的复选框,就当标签出现不是那么容易之前它。 另请参阅: CSS网格布局Fr单元指南 没有CSS网格的复选框样式 自从我们在某处阅读有关标 WP网站建设

CSS网格布局模块,不仅可以解决的布局问题的一个庞大的,而且我们一直在一些很好的旧顽强问题处理时间长,如造型复选框标签

虽然没有样式的标签时,它会出现一个相对简单的方法的复选框,就当标签出现不是那么容易之前

没有CSS网格的复选框样式

自从我们在某处阅读有关标签的内容之后,开发人员就一直为复选框添加样式标签。该技术是CSS可以拥有的强大动力的主要和古老的例子之一。

这是您可能已经熟悉的代码,它选中的复选框标签设置样式

的HTML
1个
2

<input type="checkbox">
<label>label for the checkbox</label>

的CSS
1个
2
3

input:checked + label {
  /* style me */
}

一个风格的标签复选框可能是这样的(不过,你可以使用其他的样式规则以及):

CSS复选框样式高级自定义

上面的CSS代码使用该键标记的相邻同级组合器+。当复选框处于:checked状态,一个元件之后(通常是一个标签)可使用此方法的样式。

如此简单有效的技术!什么能可能出错呢?没什么-直到您要在复选框之前显示标签。

相邻的同级组合器选择下一个元素;这意味着标签必须位于HTML源代码中的复选框之后

因此,要使标签出现屏幕上的所属复选框之前,我们不能仅将其移动到源代码中该复选框之前,因为CSS中不存在以前的同级选择器

剩下的只有一个选择:使用或或另一个具有某种动能功能的CSS属性来重新定位复选框和标签,以便标签显示在屏幕上复选框的左侧。transformpositionmargin

传统方法的问题

前面提到的技术没有什么大不了的,但是在某些情况下可能效率很低。我指的是复选框和标签的重新排列位置不再起作用的情况。

例如,考虑响应式。您可能必须根据显示的设备调整复选框的大小或位置。发生这种情况时,您也需要重新定位标签,因为不会因复选框的重新定位/调整大小而对标签进行自动重新对齐。

如果我们可以为复选框和标签提供一些可靠的布局,而不是将它们粗略地放置在页面,则可以消除此缺点。

但是,几乎所有布局系统(例如表或列)都要求您在源代码中的复选框之前添加标签,以使其在屏幕上以相同的方式显示。这是我们不希望做的事情,因为标签上的下一个元素选择器将停止工作。

另一方面,CSS Grid是一种布局系统,依赖于源代码中元素的位置/顺序

网格布局的重新排序功能有意影响视觉渲染,保留语音顺序和基于源顺序的导航。这使作者可以在不影响源顺序的情况下操纵视觉呈现…– CSS网格布局模块第1层,W3C

因此,CSS网格是对出现 checkbox 之前的标签进行样式设置的理想解决方案。

CSS网格的复选框样式

让我们从HTML代码开始。复选框和标签的顺序将与以前相同。我们只是将它们都添加到网格中。

的HTML
1个
2
3
4

<div id="cbgrid">
  <input type="checkbox">
  <label>label for the checkbox</label>
</div>

随附的CSS如下:

的CSS
1个
2
3
4
5
6
7
8
9
10
11

#cbgrid {
  display: grid;
  grid-template-areas: "left right";
  width: 150px;
}
input[type=checkbox] {
  grid-area: right;
}
label {
  grid-area: left;
}

我已经写了一篇有关该主题详细文章,因此我不会深入介绍CSS网格的工作原理,但是,有一些基础知识:该display: grid属性将元素转换为网格容器,grid-area标识元素所属的网格区域,并grid-template-areas形成由不同网格区域组成的网格布局。

在上面的代码中,有两个网格区域"left""right"。它们组成一个网格行的两列。复选框属于该"right"区域,标签属于"left"。这里是他们如何看待在屏幕上

CSS复选框样式高级自定义

由于我们没有更改复选框和标签在源代码中的相对位置,因此我们仍然可以使用相邻的同级组合器

的CSS
1个
2
3

input:checked + label {
  /* style me */
}

注意网格项总是被阻塞的 ; 它与周围的框(称为网格级别框)一起出现。如果您不希望这样(例如,用于标签),则在该项目上放置一个包装纸(将其包装在另一个元素中),然后将该包装纸放入网格区域

就是这样,伙计们。CSS网格有望帮助您确定那些厚脸皮复选框的布局。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/12066

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买