在页面上,我们经常会用到radio, 比如性别:男,女,保密.
但我们不喜欢默认的radio样式!我们会用其他的来替代.
我最初的做法是, 用label显示,设置radio为隐藏! (即display:none;)
当我点击label的时候,同时触发radio的click事件.
即: ($是jquery)
$(".label1").click(function(){
$(".radio1").click();
// 其他代码更改样式,让label显示为(非)激活状态
});
Firefox和Chrome都比较正常, 但IE下杯具了!
进一步调试,发现,原来IE下不会触发隐藏元素的事件,即有样式"display:none;"的元素.
这个时候我想到jQuery也有实现这个功能的插件!于是就去查那个插件的源码,啥也没查到!
然后Firebug查css,终于, clip印入我的眼帘.
在此,引用w3school上的说明:http://www.w3school.com.cn/css/pr_pos_clip.asp
语法:object.style.clip="rect(0px,50px,50px,0px)"
默认值是auto
四个参数,和css其他样式一样,分别对应:上,右,下,左.
基于元素左上角定位!
即:(上下边界离上边的距离,左右边界离左边的距离)
上边界距上边0
右边界距左边50
下边界距上边50
左边界距左边0
可见这个是显示元素左上角50×50的范围
这个css样式要配合绝对定位样式才会起作用,即下面两个经常一起出现:
object.style.position="absolute";
object.style.clip="rect(0px,50px,50px,0px)";
回到我们radio的问题,我们不能设置radio "display:none;"
而是设置
position : absolute;
clip : rect(1px, 1px, 1, 1px);
这个时候,radio不再是隐藏的,而是可见的元素,不过通过裁剪(clip),我们实际上是看不见它的, 问题解决!
分享到:
相关推荐
CSS中的:befor、:after都会创建一个伪元素,其中:befor创建的伪元素是所选元素的第一个子元素,:after创建的伪元素是所选元素的最后一个子元素。 :befor、:after创建的伪元素默认样式为内联样式。 1.2 语法 /* CSS3...
css元素样式:字体、背景、布局等
`clip-path` 还可以用来创建动画效果,例如,实现一个元素逐渐显示或隐藏的效果: ```css .fade-in { animation: fadeIn 3s infinite; } @keyframes fadeIn { 0%, 100% { clip-path: circle(0% at 50% 50%); } ...
在这个特定的主题中,“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果:当鼠标悬停在一个div上时,另一个关联的div会显示出来,同时其他无关的div保持隐藏状态。这种效果在创建导航...
CSS样式初始化是开发过程中一个重要的步骤,它旨在消除浏览器之间的默认样式差异,确保网页在不同浏览器上的一致性表现。"commonInitialize.css"就是这样一个专门用于全局CSS样式初始化的文件。 首先,我们来理解...
- **浏览器开发者工具:**如Chrome DevTools,可以实时查看和修改CSS样式,是调试过程中的得力助手。 - **CSS预处理器:**Sass、Less等工具可以帮助开发者编写更简洁、易于维护的CSS代码。 - **代码检查工具:**如...
2. 应用CSS样式:通过CSS,我们将为页面的各个元素添加样式,并使其与chat.openai.com的外观和感觉相似。 3. 添加JavaScript功能(可选):如果你想要在页面上模拟真实的聊天对话,你可以使用JavaScript添加一些...
在本文中,我们将深入探讨如何使用CSS3的`clip`属性和jQuery库来创建一个响应式的背景图片放大动画效果。这种技术广泛应用于现代网页设计,为用户提供动态且引人入胜的交互体验。 首先,`clip`属性是CSS中用于裁剪...
【CSS基础学习】是网页设计领域中的重要环节,它是一种用于...从基础的样式设置到复杂的布局设计,每一个实例都是一个学习和进步的机会,让你的CSS技能更上一层楼。开始探索这个丰富的资源库,开启你的CSS学习之旅吧!
3. 外部样式表:通过`<link>`标签引用单独的CSS文件,适用于多个页面共享样式,是最佳实践。 在进行前台页面设计时,理解并熟练运用HTML和CSS的语法规则、选择器、盒模型、布局技巧和响应式设计原则至关重要。此外...
2. **属性(Properties)**:属性是CSS样式的一部分,定义了元素的视觉特性,如`color`用于设置文本颜色,`font-size`用于设置字体大小。 3. **值(Values)**:属性后面跟随的值,指定了属性的具体设置,如`red`是...
解决这个问题的一个技巧是使用`!important`来优先应用`line-height:0px;`,然后用正常高度的`line-height`覆盖它,例如`line-height:0px!important;line-height:32px;`。 关于HTML的`<a>`标签,在IE6下,使用`$("#...
当一个元素的内容区域超过其容器的边界时,`clip`属性可以帮助我们修剪超出部分,使得用户只能看到我们指定的部分。这个属性通常与`position: absolute`或`position: fixed`一起使用,因为它只对绝对定位的元素有效...
3. 页面顶部阴影效果:通过在body元素前增加一个固定定位的伪元素,并赋予阴影样式,可以在页面顶部创建一种阴影效果。此技巧可增强页面的视觉层次感。 4. 统一设置行高:通过在body元素中设置line-height属性,...
"css-effects:css特效"是一个专注于CSS特效的集合,提供了各种视觉效果的实现方法,以增强用户体验并提升网站的吸引力。在这个集合中,我们可以看到多种CSS技巧和模式,帮助开发者创造出引人入胜的网页元素。 1. ...
### CSS+DIV编写经验总结之CSS样式小模板 #### 概述 随着互联网技术的不断发展,Web前端设计已经成为了一个至关重要的领域。对于前端开发者来说,掌握CSS+DIV布局技巧是必不可少的一项技能。本文将根据提供的内容...
CSS样式表是网页设计中用于控制页面布局和视觉表现的重要工具。以下是基于标题和描述的10个关键CSS技巧,帮助你提升网页的美观度和专业性。 1. CSS字体简写规则: 当定义字体样式时,可以使用简写形式,如`font: 1...
`Untitled-1.css`文件就是这个页面的CSS样式表。CSS可以通过内联样式、内部样式(放在`<style>`标签内)或外部样式表(如本例)来应用。在`Untitled-1.css`中,我们可以期待看到选择器(如元素选择器、类选择器、ID...
- Foundation:另一个广泛使用的前端框架,提供强大的响应式工具和组件。 - Tailwind CSS:实用主义的样式库,专注于提供原子级的样式类,快速构建定制界面。 **CSS最佳实践** 1. **模块化**:将样式组织成模块,...