当前位置:首页 > 全栈分享 > html+css > 正文
博客改版技术总结:input的radio样式兼容和ios微信里hover效果兼容
发布时间:2018-07-31 23:09:31作者:魏义齐阅读:()评论:
本次改版的技术总结分两个方面来讲,一个是input的radio在苹果手机里的样式兼容,另一个是hover效果在苹果手机微信里的点击效果兼容。
一、input的radio不写兼容在苹果手机里是个什么吊样子大家都知道吧,兼容样式是必须要写的。
下面是我网站搜索里面的radio样式代码,没记错的话是在百度知道里复制的,看样式还不错,我就没再改,这段代码初级css水平的人不会这么写,初级写旋转一般用rotate,我在代码后面做了简单的注释,相信大家都能看懂。
- #ssdm .search .condition input {
- display: inline-block;
- vertical-align: middle;/*当成为行内块元素时它就可以垂直居中了*/
- width: 20px;
- height: 20px;
- -webkit-appearance: none;/*清除原有的样式*/
- background-color: transparent;
- border: 0;
- outline: 0 !important;/*去掉点击后外面可能会出现的蓝框*/
- line-height: 20px;
- color: #d8d8d8;
- }
- /*在input的内容之后插入新内容*/
- #ssdm .search .condition input:after {
- content: "";
- display: block;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- text-align: center;
- line-height: 14px;
- font-size: 16px;
- color: #fff;
- border: 3px solid #ddd;
- background-color: #fff;
- box-sizing: border-box;/*规定两个并排的带边框的框*/
- }
- /*选中之后的样子*/
- #ssdm .search .condition input:checked:after {
- content: "L";
- transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);/*2D变换改变参数让元素旋转,除了旋转之外还有平移和缩放,旋转是比较复杂的,我们平时旋转用的是rotate,这个写法是比较复杂一点的写法,括号里面的六个值来得矩阵,实现2D变换,更详细的大家去百度查。*/
- -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
- border-color: #099414;
- background-color: #099414;
- }
左边是在谷歌里的样子,右边是在火狐里的样子。
二:我的比如首页的摄影图片在图片上悬停有一个透明层出来,在手机里自然是点击,但在苹果手机微信里点击却出不来,解决方法很简单在<body>里面加上ontouchstart就可以了,不用像网上说的什么先得激活active。
相关阅读
-
无相关信息
上一篇:在微信中,图片上的元素需要悬停出现时,在图片上点击,图片被直接放大预览怎么解决下一篇:cms系统loop循环造成的页面布局问题如何解决
收起二维码
原创不易,您的赞助就是博主更新的动力!
赞助请备注,8.88元及以上可在赞助光荣榜留下外链信息。
完全自托管的评论系统
最新会员
-
东方星雨
-
deanhan
-
1264822519
-
aini3311
-
a1051020101
-
weiyiqi
- css3实现打字效果(详细解析,单行光标消失)(1785)
- 如何修改select右边小三角的样式(1232)
- 前端经验分享之上传工具的使用和扒改网页(1226)
- css3背景色渐变的动画实例应用(823)
- cms系统loop循环造成的页面布局问题如何解决(804)
- 盘点竞价手机网页对meta标签的特殊需求(595)
- css图片闪光效果实现代码及详细解读(581)
- 悬浮窗紧贴网页主内容区定位的方法(540)
- 博客改版技术总结:input的radio样式兼容和ios微信里hover效果兼容(509)
- 前端经验分享之定位(444)
- css图片闪光效果实现代码及详细解读(2019-05-17)
- css3背景色渐变的动画实例应用(2019-01-06)
- css3实现打字效果(详细解析,单行光标消失)(2019-01-03)
- 一场由css代码里“{}”前的空格引起的风波(2018-10-05)
- 悬浮窗紧贴网页主内容区定位的方法(2018-09-11)