工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > html+css > 正文

博客改版技术总结:input的radio样式兼容和ios微信里hover效果兼容

发布时间:2018-07-31 23:09:31作者:魏义齐阅读:()评论:

本文为博主原创文章,未经博主允许不得转载。

本次改版的技术总结分两个方面来讲,一个是input的radio在苹果手机里的样式兼容,另一个是hover效果在苹果手机微信里的点击效果兼容。

一、input的radio不写兼容在苹果手机里是个什么吊样子大家都知道吧,兼容样式是必须要写的。

下面是我网站搜索里面的radio样式代码,没记错的话是在百度知道里复制的,看样式还不错,我就没再改,这段代码初级css水平的人不会这么写,初级写旋转一般用rotate,我在代码后面做了简单的注释,相信大家都能看懂。

  1. #ssdm .search .condition input { 
  2.     display: inline-block
  3.     vertical-alignmiddle;/*当成为行内块元素时它就可以垂直居中了*/ 
  4.     width20px
  5.     height20px
  6.     -webkit-appearance: none;/*清除原有的样式*/ 
  7.     background-colortransparent
  8.     border0
  9.     outline0 !important;/*去掉点击后外面可能会出现的蓝框*/ 
  10.     line-height20px
  11.     color#d8d8d8
  12. /*在input的内容之后插入新内容*/ 
  13. #ssdm .search .condition input:after { 
  14.     content""
  15.     displayblock
  16.     width20px
  17.     height20px
  18.     border-radius: 50%
  19.     text-aligncenter
  20.     line-height14px
  21.     font-size16px
  22.     color#fff
  23.     border3px solid #ddd
  24.     background-color#fff
  25.     box-sizing: border-box;/*规定两个并排的带边框的框*/ 
  26. /*选中之后的样子*/ 
  27. #ssdm .search .condition input:checked:after { 
  28.     content"L"
  29.     transform: matrix(-0.766044-0.642788-0.6427880.76604400);/*2D变换改变参数让元素旋转,除了旋转之外还有平移和缩放,旋转是比较复杂的,我们平时旋转用的是rotate,这个写法是比较复杂一点的写法,括号里面的六个值来得矩阵,实现2D变换,更详细的大家去百度查。*/ 
  30.     -webkit-transform: matrix(-0.766044-0.642788-0.6427880.76604400); 
  31.     border-color#099414
  32.     background-color#099414

左边是在谷歌里的样子,右边是在火狐里的样子。

二:我的比如首页的摄影图片在图片上悬停有一个透明层出来,在手机里自然是点击,但在苹果手机微信里点击却出不来,解决方法很简单在<body>里面加上ontouchstart就可以了,不用像网上说的什么先得激活active。

本文标签:,您可以阅读与「」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

相关阅读

    无相关信息

上一篇:在微信中,图片上的元素需要悬停出现时,在图片上点击,图片被直接放大预览怎么解决下一篇:cms系统loop循环造成的页面布局问题如何解决

原创不易,您的赞助就是博主更新的动力!

赞助请备注,8.88元及以上可在赞助光荣榜留下外链信息。

HashOver畅言云评完全自托管的评论系统

工作室注册登录标签云赞助光荣榜

最新会员
  • 东方星雨
  • deanhan
  • 1264822519
  • aini3311
  • a1051020101
  • weiyiqi