ios html5 网页取消默认样式

ios的的默认样式修改成扁平化的样式

重要的一句css -webkit-appearance: none; 将样式清除

单数会出现将raido的选择按钮也会消失

所以需要对radio的样式进行重新设置

设置input框的样式

     input[type="text"]{-webkit-appearance: none; font-size: 12px;}

设置radio选择之前和之后的样式

 1   input[type="radio"]:checked , input[type="checkbox"]:checked {
 2   -webkit-appearance: none;
 3 border-color: #f67200;
 4 background-color: #f67200;
 5
 6
 7 }
 8
 9   input[type="radio"], input[type="checkbox"] {
10 -webkit-appearance: none;
11     position: relative;
12     width: 14px;
13     height: 14px;
14     border: 1px solid #e6e6e6;
15     -webkit-border-radius: 7px;
16     border-radius: 7px;
17     background-color: #fff;
18     vertical-align: middle;
19 }
20    input[type="checkbox"] {
21 -webkit-appearance: none;
22     position: relative;
23     width: 14px;
24     height: 14px;
25     border: 1px solid #e6e6e6;
26     -webkit-border-radius: 2px;
27     border-radius: 2px;
28     background-color: #fff;
29     vertical-align: middle;
30 }

设置选择之后checkbox的样式

     input[type="checkbox"]:checked:after {content: '';position: absolute;left:  1px;top: 1px;width: 10px;height: 5px;border-left: 2px solid #fff;border-bottom: 2px solid #fff;
-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}

转载于:https://www.cnblogs.com/silences/p/5261193.html

ios html5 网页取消默认样式相关推荐

html5 video修改默认样式,HTML5中将video设置为背景的方法
主要用到了video标签,css样式,原理是先将video标签利用position:fixed;使video标签脱离文档流,在将他的z-index设置为最低的,比如-9999.再插入的内容自然就覆盖在 ...
移动web开发，ios下移除input默认样式
IOS环境下的按钮都是经过美化的,而且会覆盖你写入的样式,重置后即可实现自定义样式按钮在ios下正常显示下面这句代码重置这些样式: input[type=button]{-webkit-appear ...
html5首页图标怎么除掉,移动端H5页面端如何除去input输入框的默认样式
移动端H5页面端如何除去input输入框的默认样式发布时间:2020-09-29 16:41:58 来源:亿速云阅读:124 作者:小新这篇文章主要介绍了移动端H5页面端如何除去input输入框 ...
iOS 7状态栏在iPhone应用程序中恢复到iOS 6默认样式？
本文翻译自:iOS 7 status bar back to iOS 6 default style in iPhone app? In iOS 7 the UIStatusBar has been ...
《HTML5+CSS3网页布局和样式精粹》.(张亚飞).[PDF]ckook
图书作者: 张亚飞图书编号: 9787302261834 图书格式: PDF 出版社: 清华大学出版社出版年份: 2011 图书页数: 500-600 [内容简介] 对于初入门的网页设计者和开 ...
WebStorm取消默认style样式折叠
WebStorm取消默认style样式折叠: File--->Settings打开一个窗口 Edit--->CodeFolding 把HTML style attribute的前面的钩去掉 ...
取消chrome浏览器下input和textarea的默认样式
chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所 ...
如何使用 CSS 中的重置（reset）属性来重置元素在网页中的默认样式
嗨,大家好!今天,我要和你们聊聊CSS中的"重置"属性,也就是让我们一起来重置一下网页中元素的默认样式吧! 首先,让我们来看看一些常见的元素有什么特点,也就是需要"重置& ...
取消文本框被选中时边框的默认样式
取消文本框被选中时边框的默认样式文本框被选中时其边框会变为默认的样式,使用这个属性可以取消其默认样式,文本框被选中时边框无变化 outline: none; 举例 <style>#bia ...

ios html5 网页取消默认样式

ios html5 网页取消默认样式相关推荐

最新文章

热门文章