资讯专栏INFORMATION COLUMN

火狐下input type=radio样式不能修改问题

yanwei / 1644人阅读

摘要:开发中,会遇到在谷歌中点选没有反应,在火狐中样式不能修改的问题,这里有个小窍门是否把的透明度设置为,按钮选没选中的效果用来写。

开发中,会遇到在谷歌中input type=radio点选没有反应,在火狐中input type=radio样式不能修改的问题,这里有个小窍门:

  
  

把input的透明度设置为0,按钮选没选中的效果用background:url(...) no-repeat;来写。

CSS:
.lab input{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;}
.lab{display:inline-block;background:url(../images/home_default.png) no-repeat;margin-right:3px;cursor:pointer;}
.onCheck{background:url(../images/home_radio.png) no-repeat;}

JS:
$("body").on("click",".lab",function(){
    $(this).attr("class","lab onCheck");
    $(this).siblings().attr("class","lab");
})

效果:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111975.html

相关文章

  • 火狐input type=radio样式不能修改问题

    摘要:开发中,会遇到在谷歌中点选没有反应,在火狐中样式不能修改的问题,这里有个小窍门是否把的透明度设置为,按钮选没选中的效果用来写。 开发中,会遇到在谷歌中input type=radio点选没有反应,在火狐中input type=radio样式不能修改的问题,这里有个小窍门: 是 否 把input的透明度设置为0,按钮选没选中的效果用background:url(...) no-r...

    KoreyLee 评论0 收藏0
  • 前端面试题-伪类和伪元素

    摘要:四伪类列举状态伪类状态伪类是基于元素当前状态进行选择的。目前,只有火狐浏览器支持伪类,并在火狐浏览器中使用时需要添加前缀试验阶段。 一、伪类和伪元素的引入 1. 规范说明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

    Cristic 评论0 收藏0
  • 前端面试题-伪类和伪元素

    摘要:四伪类列举状态伪类状态伪类是基于元素当前状态进行选择的。目前,只有火狐浏览器支持伪类,并在火狐浏览器中使用时需要添加前缀试验阶段。 一、伪类和伪元素的引入 1. 规范说明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

    entner 评论0 收藏0
  • 总结:如何修改美化radio、checkbox的默认样式

    摘要:现在前端页面效果日益丰富,默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改样式的方法。它使用纯编写,没有任何的文件。 现在前端页面效果日益丰富,默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改radio、CheckBox样式的方法。 原理:大致原理都是使用原生的checkbox或inp...

    asce1885 评论0 收藏0
  • 总结:如何修改美化radio、checkbox的默认样式

    摘要:现在前端页面效果日益丰富,默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改样式的方法。它使用纯编写,没有任何的文件。 现在前端页面效果日益丰富,默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改radio、CheckBox样式的方法。 原理:大致原理都是使用原生的checkbox或inp...

    Anshiii 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<