CSS 用图片替换checkbox样式 - ta爷的国 - ITeye博客

`

yanzhihong23

浏览: 59567 次
性别:
来自: 上海

最近访客更多访客>>

229558630

wd1282988143

yzq21056563

dagf113225

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

yzq21056563：感谢作者分享~请教下，web前端中文站里的 http://ww ...
多行文字溢出[...]的实现(text-overflow: ellipsis)
yanzhihong23：樱井智树写道楼主可以详细解释下原理么？乍一看经验不足真心不 ...
JS数组的去重与降维
樱井智树：楼主可以详细解释下原理么？乍一看经验不足真心不怎么看得出来 ...
JS数组的去重与降维
yanzhihong23： <div class="quote_title ...
CSS 用图片替换checkbox样式
e421083458：十分感谢！试验成功了！
CSS 用图片替换checkbox样式

CSS 用图片替换checkbox样式

博客分类：

Web

阅读更多

<html>
<head>
<style type="text/css">
a,label {
	display:block;
	width:25px;
	height:25px;
	overflow:hidden
	}
a {
	background:url("xxx.gif") no-repeat
	}
a:hover {
	background:url("yyy.gif") no-repeat
	}
a#b,a#d {
	background:url("zzz.gif") no-repeat
	}
</style>
</head>
<body>

<label for="la1">
	<a href="#b" id="a" onclick="la1.checked=true"></a>
	<a href="#a" id="b" onclick="la1.checked=false"></a>
	<input type="checkbox" id="la1" />
</label>
<label for="la2">
	<a href="#d" id="c" onclick="la2.checked=true"></a>
	<a href="#c" id="d" onclick="la2.checked=false"></a>
	<input type="checkbox" id="la2" />
</label>
</body>
</html>

分享到：

用图片替换checkbox的样式 | tomcat重启时自动清除缓存

2011-08-09 14:46
浏览 4190
评论(2)
分类:Web前端
查看更多

评论

2 楼 yanzhihong23 2011-09-14

e421083458 写道

十分感谢！试验成功了！

发现没？！你是我博客的第一个评论人！！

1 楼 e421083458 2011-09-07

十分感谢！试验成功了！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

11种炫酷CSS3复选框checkbox样式美化效果: 本文将深入探讨“11种炫酷CSS3复选框checkbox样式美化效果”这一主题，以及如何利用这些效果提升用户体验。首先，我们要明白CSS3中的复选框（checkbox）是HTML中的一种表单元素，用于让用户做出选择。默认情况下，...

用图片替换checkbox原始样式并实现同样的功能: 本文将详细讲解如何用图片替换`checkbox`的原始样式，并保持其原有的功能。首先，我们需要创建一个基本的HTML结构。通常，我们会使用一个`<div>`包裹`<input type="checkbox">`和一个用于显示图片的`<div>`。这样...

动态替换checkbox: 这个功能的核心在于利用JavaScript或者CSS来改变默认的checkbox样式，将其替换为更加吸引人的图片。接下来，我们将详细讨论如何实现这个功能。首先，我们了解下HTML中的checkbox元素。Checkbox是用户可以选中或...

checkbox 图片兼容 JQ: 在IT行业中，尤其是在前端开发领域，"checkbox 图片兼容 JQ"的主题涉及到的是如何在网页中使用图片替换默认的checkbox复选框，并确保这种替换在不同的浏览器，特别是老版本的Internet Explorer（IE）中也能正常工作...

纯css3漂亮的checkbox和radio美化效果插件pretty.css.zip: 此外，CSS3还支持自定义字体和符号，这使得我们可以使用图标字体库来替换原本的复选框和单选按钮图标。只需设置`content`属性并引用相应的图标编码，就能轻松实现个性化的图标设计。在"pretty.css"插件中，开发者...

11种炫酷CSS3复选框checkbox样式美化特效源码.zip: 【标题】中的“11种炫酷CSS3复选框checkbox样式美化特效源码”指的是一个集合了多种设计风格的CSS3实现的复选框（checkbox）美化效果。CSS3是层叠样式表的第三版，它引入了许多新特性，如选择器、过渡、动画、阴影等...

CSS3美化Checkbox复选框代码.zip: 通过设置`content`为特定的Unicode字符或者使用图片，可以替换原生的勾选图标。 3. **CSS3过渡和动画**：通过`transition`属性，可以在用户交互时添加平滑的过渡效果，如改变颜色或大小。`animation`属性则允许创建...

shaftoggle优雅可切换元素用于替换checkbox控件: 然而，原生`checkbox`的样式和交互体验有时难以满足设计师和开发者的需求。为了解决这个问题，`shaftoggle`应运而生，它是一个优雅且可自定义的切换元素，专门用于替换传统的`checkbox`控件。 `shaftoggle`的核心...

自定义checkbox样式: 通过结合CSS和JavaScript，我们可以实现对checkbox样式的完全控制，从而创建出与整体设计风格相匹配的复选框。首先，我们需要了解HTML的基本checkbox结构。一个简单的checkbox元素如下所示： ```html ...

CheckBox兼容浏览器美化: 同时，为了实现视觉上的美化，`1.gif`可能是一个用于替换原生CheckBox图标的图片资源。开发者可以将这个图片作为背景图应用到CheckBox上，通过CSS控制其显示和隐藏，如： ```css input[type="checkbox"] { ...

checkbox radio select 样式修改样例: `appearance`属性可以帮助我们消除浏览器的默认样式，而`background-image`则可以让我们用自定义的SVG图标替换默认的下拉箭头。在实际项目中，可能会遇到跨浏览器兼容性问题。例如，某些CSS属性在旧版浏览器中可能...

bootstraps 复选框样式优化样式修改: 若想修改样式，可以直接在项目的CSS文件中添加新的样式规则，使用更高的优先级（如使用更具体的类选择器或者添加`!important`）来覆盖Bootstraps的默认样式。 2. **自定义图标**：Bootstraps的复选框使用字体图标...

自定义checkbox与button操作: 这里使用了CSS的`:checked`伪类来选择被选中的checkbox旁边的button，`+`是相邻兄弟选择器，意味着当checkbox被选中时，它后面的`.checkbox-checked`类的元素（这里是button）将应用新的样式。在压缩包中的`...

CSS3 checkbox复选框特效源码 12种.zip: 1. **纯CSS3图形化复选框**：CSS3引入了伪元素（`:before` 和 `:after`）和伪类（`:checked`），允许我们用自定义的图形替换默认的复选框样式。通过设置`content`、`width`、`height`、`border`等属性，可以创造出...

html checkbox 美化: 然而，原生的HTML checkbox样式通常较为简单，不符合现代网页的美观需求。"html checkbox 美化"这个主题就是关于如何通过CSS和JavaScript技术来提升这些元素的视觉效果。首先，我们要理解HTML的checkbox基本结构。...

checkbox-radio-select样式自定义: 1. **使用库或插件**：像`Select2`、`Chosen`、`Bootstrap Select`等库，提供丰富的样式和功能，可以轻松替换原生的`select`元素。 2. **模拟`select`**：创建一个看起来和`select`相似的自定义元素，通常使用`...

ace的css样式内容。: ace的css样式内容，用于之前element的样式文件，直接替换即可。

CSS定义Radio单选项和Checkbox复选框样式有效代码: 总的来说，通过CSS和JavaScript的结合，我们可以打破浏览器对Radio和Checkbox样式控制的限制，创建出符合网站设计风格的定制化表单元素。这种方法需要注意兼容性问题，确保在各种浏览器和设备上都能正常工作。同时，...

jquery radio checkbox 美化: 为了进一步提升用户体验，我们可以用图片或图标字体（如Font Awesome）替换原始的复选框和单选按钮。使用`content`伪元素和`before`或`after`，可以将自定义图标插入元素内。在jQuery事件处理中，我们根据元素的选中...

CSS3单选框复选框和开关按钮美化样式UI库: 在"CSS3单选复选按钮美化样式"中，开发者通常会用自定义的图形（如圆圈或方框）替换原有的单选和复选标记，通过调整边框、背景颜色和大小来实现扁平化设计。这些样式可以通过编写CSS类并应用到HTML元素上实现。例如...

Global site tag (gtag.js) - Google Analytics