<!--html-->

<label class="bl_input_checkbox click_checkbox" che_data="10"><input type="checkbox" name="" value=""><i></i><span>有作品</span></label>
//css

.bl_input_checkbox i {font-size:12px;font-style:normal;display:inline-block;width:13px;height:13px;text-align:center;line-height:13px;color:#fff;vertical-align:middle;margin:-2px 5px 1px 0px;border:#FF6600 1px solid;

    background-size: auto;

    background-repeat: no-repeat;

    background-position: center -3px;

}

.bl_input_checkbox input[type="checkbox"]{display:none;}

.bl_input_checkbox input[type="checkbox"]:checked + i{/*background:#FF6600;*/ background-image: url('../img/duihao_2.png');}

图片解说：

checkbox 用css改变默认的样式的更多相关文章

  1. 用纯css改变默认的radio和checkbox的样式

    利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...

  2. 详解CSS设置默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  3. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

  4. css控制默认滚动条样式

    针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...

  5. FineReport——JS二次开发（CSS改变控件样式）

    FR提供一些选择器,可以改变部分控件的样式,那么对于如何书写自己的css: 可以自己写css文件导入,也可以在页面加载结束事件中添加JS方法来改变css样式. 以文本框为例: 书写css文件,保存至% ...

  6. css 修改默认滚动条样式

    来自:https://www.cnblogs.com/juqian/p/6273808.html 侵删 <div class="inner"> <div clas ...

  7. CSS——改变浏览器滚动条样式

    https://www.cnblogs.com/sun-rain/p/5789417.html

  8. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  9. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

随机推荐

  1. 给Myeclipse配置tomcat服务器

    1.安装好Tomcat 7.x服务器 2.window->perference,在搜索框中搜索Tomcat: 3.将MyEclipse自带的Tomcat及其他的Tomcat服务器禁用: 4.启用 ...

  2. 练习：javascript-setInterval动画运动平移，定时器动画练习

    常见问题:定时器加速问题,每次点击会启动一个定时器,解决先清除定时器 <!DOCTYPE html> <html lang="en"> <head&g ...

  3. PhpStorm+xdebug调试——更新

    之前写过一篇<PhpStorm+xdebug+postman调试>,但是经过后来一段时间的使用,发现有些累赘.这里介绍一种比较简单方便的操作. 在上一篇文章中有一段“ 7.设置Server ...

  4. 模组 前后端分离CURD 组件

    js (function () { // {# -------------------------------------------------------------------------- # ...

  5. Django ORM中，如何使用Count来关联对象的子集数量

    示例models 解决方法 有时候,我们想要获取一个对象关联关系的数量,但是我们不要所有的关联对象,我们只想要符合规则的那些关联对象的数量. 示例models # models.py from dja ...

  6. .Net Core---- 通过EPPlus批量导出

    前台代码: 前台代码是在.net core bootstrap集成框架上的(这是效果浏览地址:http://core.jucheap.com[效果地址来自:http://blog.csdn.net/a ...

  7. C# 微信开发-----微信会员卡（一）

    这是微信的官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1451025283,能看懂的朋友就请不要往下看了,我是看不懂 ...

  8. GRPC单向/双向流

    开始食用grpc(之二)https://www.cnblogs.com/funnyzpc/p/9570992.html 开始食用grpc(之一)https://www.cnblogs.com/funn ...

  9. Angular项目中共享模块的实现

    创建share Modele:ng g m share import进来所有需要共享的模块都export出去, 一.共享CommonModule 暂时只有CommonModule,以后会有一些需要共享 ...

  10. 记一次Mysql魔鬼实训

    1.查看某个Mysql数据库当前使用的字符集 show create database [库名称] 2.查看当前书库版本信息 #mysql -V MariaDB [(none)]> use my ...