使用CSS3实现input多选框自定义样式

daryl 发布于2019-08-30 15:44 / 2436人阅读

摘要：原理首先把元素隐藏掉，然后用设置元素其他元素也可以的样式，选中时的样式使用选中，无须使用图片和效果预览代码男女代码清楚默认样式让层级高于，使之能选中这里显示矩形的一半边框再旋转度来实现对勾样式

原理：首先把input元素隐藏掉，然后用CSS设置label元素（其他元素也可以）的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS

效果预览

html代码

CSS代码

.radio {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.radio input {
    width: 15px;
    height: 15px;
    appearance: none;/*清楚默认样式*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    z-index: 8; /*让input层级高于label，使之能选中*/
    
}

.radio label {
    position: absolute;
    left: 0;
    top: 6px;
    width: 15px;
    height: 15px;
    border: 1px solid #3582E9;
}

.radio input:checked+label::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    /* 这里显示矩形的一半边框再旋转45度来实现对勾样式 */
    width: 5px;
    height: 12px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(45deg);
}

GPU云服务器云服务器多选框 asp 多选框 html的多选框获取html多选框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116091.html

【译】HTML表单高级样式

摘要：示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了，但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。系列文章说明原文在本文中，我们将了解如何在HTML表单上使用CSS，为那些难于自定义的表单组件加以样式。如前文所述，文本框和按钮很适合使用CSS，而现在我们得来探索HTML表单样式的那...

caikeal 2019-08-29 10:59 评论0 收藏0
【译】HTML表单高级样式

摘要：示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了，但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。系列文章说明原文在本文中，我们将了解如何在HTML表单上使用CSS，为那些难于自定义的表单组件加以样式。如前文所述，文本框和按钮很适合使用CSS，而现在我们得来探索HTML表单样式的那...

Jacendfeng 2019-08-01 15:29 评论0 收藏0
form表单那点事儿(上) 基础篇

摘要：用于或元素时，将提交指定的表单示例代码只能上传图片只能上传视频使用的属性，是一个类型的值，或文件后缀名。在以前，要想改变表单元素外观，需要通过其他标签来模拟。以下点到名的表单元素，还是可以照常使用的。做为html中最为常见，应用最广泛的标签之一，form常伴随前端左右。了解更深，用的更顺。表单属性这个表单展示了form表单常用的属性属性名属性值 ...

Forest10 2019-08-01 15:24 评论0 收藏0
HTML表单元素及CSS

摘要：表单一介绍标签表示为表单，表单元素是允许用户在表单中输入内容。属性值被提交表单的类型二表单组件组件一般被定义在表单中标签中标签表示输入框，为空标签。属性，属性规定要显示的元素的类型。冒号表示分隔符，分号表示结束符。表单一、介绍标签表示为表单，表单元素是允许用户在表单中输入内容。属性：action-提交表单的地址 Method-提交表单的方式。属性值：get/post ...

MyFaith 2019-08-30 13:48 评论0 收藏0
HTML表单元素及CSS

摘要：表单一介绍标签表示为表单，表单元素是允许用户在表单中输入内容。属性值被提交表单的类型二表单组件组件一般被定义在表单中标签中标签表示输入框，为空标签。属性，属性规定要显示的元素的类型。冒号表示分隔符，分号表示结束符。表单一、介绍标签表示为表单，表单元素是允许用户在表单中输入内容。属性：action-提交表单的地址 Method-提交表单的方式。属性值：get/post ...

jayzou 2019-08-01 17:50 评论0 收藏0