checkbox样式 | 易学教程

前端面试题-伪元素的应用

阅读更多关于前端面试题-伪元素的应用

一、伪元素的应用 1. 清除浮动父元素中有子元素，并且父元素没有设置高度，子元素在父元素中浮动，结果必然是父元素的高度为 0，这也就导致了父元素高度塌陷，我们就需要清除浮动。给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个 :after 伪元素实现元素之后添加一个看不见的块元素（Block element）清理浮动。 2. 分割线 HTML <p class="line">分割线</p> CSS .line::before, .line::after { content: ''; display: inline-block; border-top: 1px solid black; width: 200px; margin: 5px; } 3. 计数器 HTML <div class="chooses"> <input type="checkbox">a <input type="checkbox">b <input type="checkbox">c <input type="checkbox">d <input type="checkbox">e <input type="checkbox">f <input type="checkbox">g <input type="checkbox">h <input type=

checkbox 用css改变默认的样式

阅读更多关于 checkbox 用css改变默认的样式

<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;*/

用css改变默认的checkbox样式

阅读更多关于用css改变默认的checkbox样式

利用css的：label代替checkbox效果优点：不需要图片，纯css搞定缺点：兼容性，IE8以下不支持直接上代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用css改变默认的checkbox样式</title> </head> <body> <div><label><input type="checkbox"><b></b>选择</label></div> <style> input[type="checkbox"]{display: none;} input[type="checkbox"]+b{ 　　display: inline-block; 　　width: 18px;height: 18px; 　　border: 1px solid #ccc; 　　cursor: pointer; 　　-moz-border-radius: 3px; 　　-webkit-border-radius: 3px; 　　border-radius: 3px; 　　vertical-align: middle; } input[type="checkbox"]:checked+b{ 　　background: #f00;border-color: #f00; } </style> <

用css改变默认的checkbox样式

阅读更多关于用css改变默认的checkbox样式

自己常用的改变checkbox样式的两个方法：一.利用background用图片代替checkbox效果缺点：你首先得有一张好看的图片优点：浏览器兼容性好 <!doctype html> <html> <head> <meta charset="utf-8"> <title>chec</title> <style> #wrapper {margin: 20px auto;} #wrapper .input_check {position: absolute;width: 20px;height: 20px;visibility: hidden;} #wrapper span {position: relative;} #wrapper .input_check+label {display: inline-block;width: 20px;height: 20px;background: url(checkbox2.png) no-repeat;background-position: -31px -3px;} #wrapper .input_check:checked+label {background-position: -5px -3px;} </style> </head> <body> <h3>利用background用图片代替checkbox效果</h3>

jQuery快速入门

阅读更多关于 jQuery快速入门

一、jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 二、jQuery的优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫

mui checkbox设置方形复选框样式

阅读更多关于 mui checkbox设置方形复选框样式

mui的官方文档上mui checkbox的样式是圆形样式，乍一看以为是单选框。查了一下，官方的回复是：设计理念以iOS 7为基础，借鉴部分Android系统特有控件；之前同时提供了圆形的checkbox和方形的checkbox，后来发现iOS上的圆形checkbox，大家都已习惯，因此就删掉了方形的checkbox。所以对于有方形checkbox有需求的小伙伴可以自己设置。 /* 更改checkbox样式*/ .mui-checkbox input[type=checkbox]:before { content: '\e413'; } .mui-checkbox input[type=checkbox]:checked:before { content: '\e443'; } .mui-checkbox.mui-left input[type=checkbox] { left: 0px; } 来源： CSDN 作者：腴i 链接： https://blog.csdn.net/ohdajing/article/details/103496175

jQuery Validate验证框架详解

阅读更多关于 jQuery Validate验证框架详解

一、导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="<%=path %>/validate/jquery.validate.min.js"></script> 注：<%=request.getContextPath() %>返回web项目的根路径。二、默认校验规则 (1)、required:true 必输字段 (2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值 (3)、email:true 必须输入正确格式的电子邮件 (4)、url:true 必须输入正确格式的网址 (5)、date:true 必须输入正确格式的日期，日期校验ie6出错，慎用 (6)、dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 (7)、number:true 必须输入合法的数字(负数，小数) (8)、digits:true 必须输入整数 (9)、creditcard:true 必须输入合法的信用卡号 (10)、equalTo:"#password

css改变checkbox的背景

阅读更多关于 css改变checkbox的背景

checkbox默认不支持修改背景颜色,利用伪类元素实现，基本原理是利用after/ before插入新的元素。然后利用新元素的背景颜色或背景图片覆盖掉原来的样式。原始样子要实现的样子 <input type="checkbox" /> input[type=checkbox] { cursor: pointer; position: relative; } input[type=checkbox]:after { position: absolute; width: 10px; height: 10px; content: " "; background-color: rgb(200,237,255); visibility: visible; border-top: 1px solid #ccc; border-left: 1px solid #ccc; } input[type=checkbox]:checked:after { content: "✔"; position: absolute; line-height: 11px; left: 0; top: 0; } 来源： https://www.cnblogs.com/yuNotes/p/11982183.html

python-前端Jquery

阅读更多关于 python-前端Jquery

Jquery 高级版javascript 提供了更加便利的js使用方式楔子需求二：将上面的li标签实现隔行换色效果 js代码 <script> var obj = document.getElementsByClassName('city'); for (var j = 0;j < obj.length;j++){ if (j%2==0){ obj[j].style.backgroundColor = 'lightblue' }else{ obj[j].style.backgroundColor = 'lightgreen' } } </script> jquery代码 $('li:odd').css('background-color','lightblue') $('li:even').css('background-color','lightyellow') jquery介绍 js的痛点： window.onload事件只能出现一次如果出现多次，后面的事件会覆盖前面的事件浏览器兼容性问题简单的功能实现的很繁琐，例如：渐变的动画效果代码容错性差，如果此处报错，会影响后续代码执行 jquery的特点链式编程：比如 .show() 和 .html() 可以连写成 .show().html() 。隐式迭代：隐式对应的是显式。隐式迭代的意思是

layui之表单

阅读更多关于 layui之表单

1.使用 layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上 class="layui-form" ，一切的工作都会在你加载完form模块后，自动完成。如下是一个最基本的例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui.form小例子</title> <link rel="stylesheet" href="layui.css" media="all"> </head> <body> <form class="layui-form">  <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"> <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"> </div>

订阅 checkbox样式