在页面上,我们经常会用到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),我们实际上是看不见它的, 问题解决!
分享到:
相关推荐
伪元素实现tooltip,nav导航栏的炫酷效果以及计数器
CSS中的:befor、:after都会创建一个伪元素,其中:befor创建的伪元素是所选元素的第一个子元素,:after创建的伪元素是所选元素的最后一个子元素。 :befor、:after创建的伪元素默认样式为内联样式。 1.2 语法 /* CSS3...
CSS初级入门:页面样式的整体声明CSS初级入门:页面样式的整体声明
人民邮电(图灵)-CSS重构:样式表性能调优.201711.epub 人民邮电(图灵)-CSS重构:样式表性能调优
想达到鼠标悬停到元素a上,显示另一个元素b,可以通过css实现也可以通过js实现。 js: 写两个函数:mouseenter,mouseleave,例如:其中 $("#a").mouseenter(function() { $("#b").show("normal"); }); $("#a")....
css元素样式:字体、背景、布局等
CSS样式文件,其中包括了超链接的设置样式,表格样式
2. 应用CSS样式:通过CSS,我们将为页面的各个元素添加样式,并使其与chat.openai.com的外观和感觉相似。 3. 添加JavaScript功能(可选):如果你想要在页面上模拟真实的聊天对话,你可以使用JavaScript添加一些...
具体可以首先在纸上写好网页中可能要用到的格名称,然后在 Dreamweaver 的编辑窗中调出 CSS 面板,一个一个地定义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;全部定义好后,再用...
:before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。 :after 伪元素在元素之后添加内容 这个伪元素...
《CSS3实战:开发与设计》书中所包含的示例的全部源码。 本书英文版书名《Practical CSS3:Developand Design》,作者Chris Mills是一名杰出的Web技术专家...贯穿本书的一个核心就是Pratical,也就是我们说的“实战”。
样式是 CSS 样式表中一个非常重要的属性,它可以确定文本的样式。常见的样式有: * normal:正常样式 * italic:斜体样式 * oblique:倾斜样式 设定字体粗细 字体粗细是 CSS 样式表中一个非常重要的属性,它可以...
progress元素用于表示一个任务的完成进度。这个进度可以是不确定的,只是表示进度正在进行,但是不清楚还有多少工作量没有完成。也可以用0到某个最大数字(如100)之间的数字来表示准确的进度完成情况(如进度百分比...
* CSS表格与列表:表格样式、列表样式 * CSS其他样式:圆角、阴影、透明度 CSS高级 * CSS3前缀和rem:CSS3新特性、rem单位 * CSS3文本效果:文本阴影、文本描边、文本装饰 * CSS3边框图片效果:border-image、...
一个简单的登陆界面,可以直接拿过来用的,主要用css+div实现的,对于初学者可以参考.
CSS控制表单样式 CSS控制表单样式 01 CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素,重置浏览器的默认样式时,...
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
用伪元素:after实现分割线和气泡
用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域。 你有没有想过,为什么我们要有这么多...
机箱通常会为CSS库,JavaScript UI库和Web开发人员创建开放标准。... 我们不想只构建另一个CSS库。 我们希望改善跨项目的协作和互操作性。项目合作与互操作性如果您维护的是一个包含UI组件JavaScript库,我