多选框点击添加背景图片/更改多选框样式

最新推荐文章于 2021-08-13 10:33:40 发布
最新推荐文章于 2021-08-13 10:33:40 发布
阅读量351 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51109349/article/details/109337418
版权

在这里插入图片描述
默认格式

在这里插入图片描述

加了样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Page Not Found</title>

        <style>
            #ckbox:checked:after{
    opacity: 1;
}
#ckbox:after{
    position: absolute;
    content: "";
    width: 14px;
    height: 13px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaCAYAAAHTUwwfAAAAAXNSR0IArs4c6QAABBxJREFUSA2tVm1olWUYvs5xSxe0/M6VikmBik5oDQwJNKgfWRthQspkDD+imZqWOA1TjNBK0fxCVCQ/Ek3UlCWoIPpDmTDLD0pIRfzYdDJlOzq1djx31/U+O+953+1sc9kN9/veH9d9X8/zvM/znAMExMyqfZfOA6qBWmNbd5mNGW/BbL7vpDU8uB7212X1KfFQstLCFbT7DQmfJYnku4vXZtF3qUolvaD6U1pt6bU120vMiy1ADJZ4XWhEW2QXL9vcFMvSGlRQJze1c9xmDz2AlUxPBtyb0/C7saqzVZ5xifcnpB8pQZJdflVHDBbetvJDZlNmeV0y2ismKkJMAu9NcNBXXtY7/dAcglmzr6zmtpuHVv0WbbOFXp7Gz3bkuEveu5+g720kvh/bzPmpIgYoYvckQqcfrWv47Evg0hUXfTYLeOCWFu++DZSW1EYikV4umebJJkeoCSssckyNjRoBK59C2OB1ai11zRO3Ibg31Wz8VLPzF2St8yfbVhchUfwpcOcu8Hw28NP62pY7slkH1hzFiVOuSLlt6/QNC5rBwi6LBonNPz37fpX3p1BtDlUojJsEPOSnyeoC7N4MfhavJspcngCUy0E++n/gl4OuSAkWUYboIdFerUThRGBE3kBV09d3a0QiMRibttOklM3U8xjJLsiQaOeYv4E1iv3bDNFoBAVF3No8fz26AVvW+kN0Za7wOqpu9sXHnydjwGu5wG/nnF++Q+8+ZKtJAYAoA/3wUs4qCNCV30iSLPp+kbztzYsU9IUjztGwTUuuIzS9TF7qrvCRrRgEX1RFk2S2Avv/wyQcTW1IMgfel2jntLlxOjocNtzPmgL8fh5YsCRVnvMCsHGF/Jvt3nGpqtYtEvVnlizIxrK13GEnwuC33kz6FU9NSDLt4pWoixlK5wCxe8nmQCY/5Q/fAP37KraCu2j2f15SEmmwJ6n5OHwMWLWBZkCGDgaWLtBJe0x9g2SVyoZmyCZ9GNMVVEOAgGmFuDwmKqidMO9rLqZ/Qh1+xlTgnVGyT1NFFpcj0aWRS41RDQ0N1ai9W8V4XD6lnBq69OkvZ74S16sy8EFxJESW/RyP33prIptFovwgmQh1Z+hI90bRJ0BdvWJOenQHvigFhnkXk5ZGRB9SB2DHHnjqkO45aiTx02THqLkkuuoS4acINzE0CafPAktWAo/+DiPkDXqVN9yMOLp1BabNzcCN6jBmcZm7n4ADJCoMJ8Oet2lIyo7YTR2OeNywZWcE+3gHtyc6X2u+NXR+Rn3GkmxveyUeYRBE8jH0f6T2RD23+nL+ACYvySBwHH+mij9S5AZ1GMnqgukO2yTWcs+l/kM1u3LVbPVGsw1bzepj+kMgWd3Rxi1mmK4BG2cyrunoytCNrivsEGf15Lc7CyT/AmwZindhHy8rAAAAAElFTkSuQmCC) no-repeat;
    background-size: cover;
    background-position: 0 -1px;
    opacity: 0;
}

    </style>
    </head>
    <body>
        <input type="checkbox" id="ckbox" />
    </body>
</html>
西瓜味白桃汽水
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 图片代替多选框,用图片替换checkbox原始样式并实现同样的功能
weixin_35971306的博客
06-04 561
1.结构：　　　　2.css里：1)设置图片的div绝对定位，调整让它与原始input重合。2)设置input的宽高与图片的div一样大，这样精确一点。3)然后设置input：position:relative；再设置它的z-index，让它浮在图片那个div的上面。4)调整两个的位置，让之重合。5)设置input：opacity:0;3.jq里：$(function(){$("input").c...
自定义标签多选更改背景图片
Mr.Peng的博客
09-04 561
最近在做项目时候遇到了标签布局问题，当时我首选的是用流式布局TagFlowLayout的控件，可是发现不能满足我项目的需求，于是翻看了一下网页写了一个用配合ChekBox来实现多选标签的布局，在这写出来，希望对其他伙伴们有些帮助！ 需取效果： 首先：我们需要一个实体类TagBean，确保有id，和name（显示的内容） public class TagBean { private S
js 多选框，（切换的是背景图片）
责任与担当
06-29 487
多选框，（切换的是背景图片） //------------多选框代码–开始-------------- class CheckBox{ _checked=false; // 构造函数,new的时候执行这个函数 constructor(){ this.elem=this.createCheck(); } ...
html 图片代替多选框,CSS vs SVG: 美化复选框和单选按钮
weixin_39612849的博客
06-04 591
这是有关于CSS和SVG技术对比的系列文章第二篇，目的是通过示例解释两者的利弊，更好的帮助大家在Web制作中解决常见设计问题时能做出更好的选择。在上一篇文章中，我们讨论了使用CSS和SVG创建带纹理的文本效果，并得到结论是：目前阶段，使用SVG比使用CSS做更方便，更强大。在这篇文章中，我们将处理自定义的复选框和单选按钮的效果。你可能已知道，使用CSS来美化表单的样式是一件不轻松的事情。但他们也不...
d3之组件的运用（单选框，下拉列表，滑动轴，多选）
偷得几日闲的博客
07-31 4135
目录目录 单选框 下拉列表 滑动轴 多选单选框1.前端<form name="myForm" action="" method="" style="position:absolute;top:30px;left:460px;line-height:20.5px;"> <input type="radio" class="radioclass1" name="single1">产值<br>
uniapp多选标签/多选按钮/多选框源码
12-01
同时，可以通过自定义样式和事件处理，使多选框功能更加灵活。 在实际项目中，这些组件的运用往往涉及到数据遍历和动态样式赋值。例如，可以通过`v-for`指令遍历后台返回的数据，动态生成多选标签、按钮或框，并...
纯css实现适配谷歌、火狐的自定义多选框、单选框颜色
01-30
在网页设计中，自定义多选框（checkbox）和单选框（radio button）的样式是一种常见的需求，尤其是在追求独特用户体验和品牌一致性时。本文将深入探讨如何仅使用CSS技术来实现这一目标，并确保样式在谷歌浏览器...
javascript 单选框，多选框美化代码
10-30
【JavaScript 单选框与多选框美化技术详解】 在网页设计中，为了提升用户体验，对表单元素如单选框（radio）和多选框（checkbox）进行美化是常见的需求。JavaScript 提供了强大的能力来操作这些元素，实现美观且...
jQuery模拟html下拉多选框的原生实现方法示例
10-16
在网页开发中，有时我们需要创建具有自定义样式和交互效果的下拉多选框，而jQuery可以帮助我们轻松实现这一目标。本示例将详细介绍如何使用jQuery来模拟HTML的下拉多选框，同时不依赖其他框架如jQuery UI或Bootstrap...
微信小程序实现多选框全选与取消全选功能示例
10-17
在微信小程序中，实现多选框（Checkbox）的全选与取消全选功能是一项常见的需求，主要用于批量操作或数据筛选。下面将详细讲解如何通过JavaScript（JS）、WXML（微信小程序的XML标记语言）和WXSS（微信小程序的CSS...
CSS3自定义美化复选框Checkbox按钮样式代码
11-11
CSS3自定义美化复选框Checkbox按钮样式代码 CSS3自定义美化复选框Checkbox按钮样式代码 CSS3自定义美化复选框Checkbox按钮样式代码
改变checkbox的样式（选项框中加图片）
QSWの
09-15 672
input[type='checkbox'] { width: 20px; height: 20px; background-color: #fff; -webkit-appearance: none; border: 1px solid #c9c9c9; border-radius: 2px; outline: none; } .li_ipt input[type=checkbox]:checked { background: url("img/ok.png")no-repeat center; }
android 下改变默认的checkbox的 选中 和被选中 图片
热门推荐
ym19860303的专栏
12-21 4万+
1.   先导入  checked.png 和 unchecked.png 两张图片 2.  在res/drawable下面，添加selector （如 check_state.xml）文件：                 android:drawable="@drawable/checked" />               android:drawable
android中的CheckBox改变背景图片后图片显示大小不正确的问题
清晨
04-20 1万+
今天在工作中遇到一个需求：点击按钮后改变页面中相关显示并改变点击按钮的背景图片显示，最后决定用checkbox来实现，但是修改背景图片后发现图片的大小显示不正常，还是按钮图片原始尺寸来显示...
修改 input checkbox(复选框) 默认的背景颜色
weixin_44037153的博客
07-27 6679
修改 input checkbox(复选框) 默认的背景颜色 附上代码： 通过 after 伪类选择器 实现 input[type=checkbox]{ cursor: pointer; position: relative; width: 15px; height: 15px; font-size: 14px; } input[type=checkbox]::after{ position: absolute; top: 0;
修改 input checkbox(复选框) 选中的背景颜色
ruanxinjie的博客
08-13 7437
input[type=checkbox]{ width: 16px; height: 16px; margin-top: 2px; position: relative; } input[type=checkbox]::after { position: absolute; top: 0; color: #000; width: 16px; height: 16px; display: inline-block; vi.
多选框设置选中状态及不可修改状态jQuery
qinduan007的博客
06-19 1796
多选框设置选中状态及不可修改状态jQuery 复选框如何获取到被选中的: 复选框如何让其默认被选中: 复选框如何让其默认选中并且不能操作更改: readonly: 给复选框设置readonly属性对复选框无用， disable:设置disable属性可以达到禁用的目的，但是多选框会变为灰色，原本的颜色会失效 如果想要达到用户无法操作的目的，又不想改变颜色可以添加 οnclick=" return false;" 小朋友们注意false后面的分号哦，缺少了就没有效果的哦 ...
elementui多选框样式修改,修改选中状态样式为一个图片
最新发布
06-01
要修改ElementUI多选框的选中状态样式为一个图片，可以通过以下步骤实现： 1. 在项目中引入需要的图片资源文件。 2. 使用CSS样式覆盖ElementUI中默认的多选框样式，将选中状态的样式修改为需要的图片。 例如，可以使用以下CSS代码： ```css .el-checkbox__input.is-checked+.el-checkbox__label { background-image: url(../images/selected.png); background-repeat: no-repeat; background-position: center center; background-size: contain; } ``` 其中，`.el-checkbox__input.is-checked+.el-checkbox__label`是ElementUI多选框选中状态的样式选择器，`background-image`属性设置背景图片的路径，`background-repeat`属性设置背景图片不重复，`background-position`属性设置背景图片位置为居中，`background-size`属性设置背景图片大小为contain。 3. 将修改后的样式应用到需要的多选框组件上。 例如，在Vue组件中，可以使用以下代码： ```vue <template> <el-checkbox-group v-model="checkedList"> <el-checkbox label="Option 1"></el-checkbox> <el-checkbox label="Option 2"></el-checkbox> <<!-- more checkboxes... --> </el-checkbox-group> </template> <script> export default { data() { return { checkedList: [] } } } </script> <style> .el-checkbox__input.is-checked+.el-checkbox__label { background-image: url(../images/selected.png); background-repeat: no-repeat; background-position: center center; background-size: contain; } </style> ``` 这样，多选框选中状态的样式就会变成指定的图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值