原文链接：http://www.lrxin.com/archives-683.html首先看下效果：点击演示地址查看实例。首先，需要添加一段CSS隐藏所有的Checkbox复选框，之后我们会改变它的外观。要做到这一点需要添加一段代码到你的CSS文件中。/*** 隐藏默认的checkbox*/
input[type=checkbox] {
visibility: hidden;
}隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被...
效果展示Demo代码HTML<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>Document</title>
</head>
<body><section><span></span></section>
</body>
</html>
CSShtml,body{margin: 0;height: 100%;
}
body{display: flex;justify-con...
网上有各种用CSS3画图标，画漫画的代码，实在是有点吊！如果能为自己的网站也绘制一套CSS3图标，那么就省去了用小图片的力气。虽然说各大浏览器对CSS3的支持性还不尽相同，但是大势所趋，写写更健康。首先，我们要做到使用简单，简单到给元素加个类就能使用图标，然后我们还要支持可定制，比如颜色，大小。看下面的代码：<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>...
html<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title><link rel="stylesheet" type="text/css" href="css/begin.css"/></head><body><section><h2>登记个人信息</h2><ol><li>课程进度推进通知</li><li>即时沟通<ol><li>QQ</li><li>微信</li></ol></li><li>快递收件地址</li></ol></section><section><h2>熟悉课程出品流程</h2><figure>课程出品流程</figure></section><section><h2>观看在线示例课程</h2><figu...
自定义滚动条实现此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：滚动条组成部分1. ::-webkit-scrollbar 滚动条整体部分2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）3. ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。5. ::-webkit-scrollbar-track-piece 内层...
CSS3的transform:scale()可以实现按比例放大或者缩小功能。CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果： 2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：代码如下：<!DOCTYPE html> <html> <head> <meta c...
原文:纯CSS3实现自定义涂鸦风格的边框今天我们要来分享一款基于纯CSS3的自定义边框应用，看上去它像一个Tooltip控件，因为下边框有一个小三角，就像很多地方的引用文本框一样。另外这款CSS3边框是涂鸦风格的，看起来很有个性。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。你也可以在这里查看在线演示下面我们来分享一下实现的方法，主要由HTML代码和CSS代码组成。HTML代码：<div><div><div>CSS3简单实现涂鸦风...
今天给某公司做招聘专页。早上完成设计图，下午开始排版。页面套用了我之前做的某人才局的招聘页面，导航栏、banner 很快就出来了。这次内容里我有些地方用了列表，当然要用 <ul> <li> 标签。列表项（小圆点）做成绿色的小正方块，这时我想是不是有一个 CSS 属性用来自定义列表项。 不用不知道，还真有。list-style 其中可定义 list-style-type、list-style-position 和 list-style-image，这三个属性是可以合在一起写。list-style...
例子 标签执行后会自动增加一个 class="item-content" 的定义在ionic.css 中, 展开后的样式可通过chrome的开发者工具查看 若想自定义，只能覆盖对应的css定义，但如果是局部样式重定义，该修改将影响全局样式。 解决方法： <ion-item class="item-complex"> </ion-item> 样式修改， 定义特殊的class路径，避免修改全局样式： .content .item-complex .item-content { padding:0px;} 其他...
经常能看到别人做前端的时候，实现一些漂亮的复选框或单选框按钮，由于现在项目原因，很多单选框和复选框看起来很不好看，于是，心血来潮打算自己实现了一遍。一、首先上css代码：其中，说明我以注释的形式写到里面；关于z-index我是基于一开始的定位考虑来设置的，此处如果谁要用到，自行思考；/*复选框效果*/
input[type=checkbox] {width:16px;height:16px;z-index:10;
} /* 此处不解释，定义的是复选框宽高*/
input[type=chec...
scrollbar website 想把下面这个换成自定义scrollbar。 scrollbar背景换成透明，scrollbar button 是黑色的。请问有办法吗？ 在此非常感谢！！ } .board-game .scroll_pane { overflow-x: scroll; overflow-y: hidden; margin: 0 0 0 11px; height: 271px; width: 662px; } 回复讨论(解决方案) http://www.wufangbo.com/scroll-bars-css-style/ .boxno{ overflow-x: scroll; overflow-y: hidden; ...
简介 用简单的jquery+CSS创建自定义的a标签title提示，用来代替浏览器默认行为。如图： Javascript代码 代码如下: $(function() { $("a[title]").each(function() { var a = $(this); var title = a.attr(title); if (title == undefined || title == "") return; a.data(title, title) .removeAttr(title) .hover( function () { var offset = a.offset(); $("").appendTo($("body")).html(title).css({ top: offset.top + a.out...
一、unicode-range是什么？一看名称，很多小伙伴可能认为是个什么生僻的东西，实际上，这玩意只是名字怪怪的，功能关键时刻还是很管用的。unicode-range是一个CSS属性，一般和@font-face规则一起使用。大家应该不赶时间吧，那我们一点一点往下深入，现在很多网站会使用微软雅黑字体，但是，微软雅黑的名称有点长：.font {font-family: microsoft yahei;
}如果这个字体不是全局的，每次用到都要写一遍都很烦。虽然说，现在Sass, Les...
下拉列表的默认样式：下面介绍自定义下拉列表的两种方法：方法一：用纯CSS自定义下拉列表的样式。原理：将默认的下拉列表样式清除，自定义样式，并附上一张向右对齐的小箭头图片。<!doctype html>
<html><head><style type="text/css">select{width:200px;height:30px;appearance:none;-moz-appearance:none;-webkit-appearance:none;background: url("images/select.png") no-repeat right center;font-size:16px;font-family:Mic...
PHP 自定义函数：清除页面所有js,html,css代码$search = array ("si", // 去掉 javascript"]*?>.*?si", // 去掉 css"<[/!]*?[^<>]*?>si", // 去掉 HTML 标记"]*?>si", // 去掉 注释标记"([rn])[s] ", // 去掉空白字符"&(quot|#34);i", // 替换 HTML 实体"&(amp|#38);i","&(lt|#60);i","&(gt|#62);i","&(nbsp|#160);i","&(iexcl|#161);i","&(cent|#162);i","&(pound|#163);i","&(copy|#169);i","&#(d );e"); // 作为 PHP 代码运行$r...
测试环境是chrome浏览器