使用 CSS 去掉 iPhone 网页上按钮的超大圆角以及文本框圆角默认样式
使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角且颜色由上而下渐变的样式,显得超级恶心,而且文本框也会有一定的圆角,但是我们自己定义 border-radius 也没有效果,经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式。此时的解决办法为:
input[type=submit],input[type=reset],input[type=button],input[type=text]{-webkit-appearance:none;}
其中,-webkit-appearance:none是去除input默认样式。
此时虽然去掉了按钮显示超大圆角以及颜色由上而下渐变的恶心样式,但按钮的圆角依然存在,所以还需在样式中加入:border-radius:0方可。注意,只能是border-radius:0;而不能使用border-radius:none,因为使用了border-radius:none,IPhone浏览器貌似不识别,依然会给input一个大概5像素左右的圆角。若需要给表单设置圆角比如5px的话,那就自行设置border-radius:5px即可。
我们在写表单的时候会发现一些浏览器对表单赋予了默认的样式,如在Chorme浏览器下,文本框及下拉选择框当载入焦点时,都会出现发光的边框,并 且在火狐及谷歌浏览器下,多行文本框textarea还可以自由拖拽拉大,另外还有在IE10下,当文本框输入内容后,在文本框的右侧会出现一个小叉叉, 等等。不容置疑,这些效果是在用户体验上得到了提升,但有些时候我们并不需要这些默认的样式,那怎么办呢?下面我们就来分别看一下解决办法。
1、去除Chrome等浏览器文本框默认发光边框
input:focus, textarea:focus {
outline: none;
}
去掉高光样式:
input:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;
}
当然这样以来,当文本框载入焦点时,所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了,但我们可以重新根据自己的需要设置一下,如:
input:focus,textarea:focus {
outline: none;
border: 1px solid #f60;
}
这样的话,当文本框载入焦点时,边框颜色就会变为橙色,给用户一个反馈。
2、去除IE10+浏览器文本框后面的小叉叉
只需下面一句就ok了
input::-ms-clear {
display: none;
}
3、禁止多行文本框textarea拖拽
这样按下面添加属性多行文本框就不能拖拽放大缩小了:
textarea {
resize: none;
}
在这里要提到一个属性resize,这个是CSS3属性,用于元素缩放,它可以取以下几个值:
none 默认值
both 允许水平方向及垂直方向缩放
horizontal 只允许水平方向缩放
vertical 只允许垂直方向缩放
不仅可以针对textarea元素,对大多数元素都适用,如div等,在这里不一一列举,但与textarea不同的是,对div使用时需要加上一句overflow: auto;,也就是这样才有效果:
div {
resize: both;
overflow: auto;
}
以上就是关于去除表单浏览器默认样式的一些内容。
使用 CSS 去掉 iPhone 网页上按钮的超大圆角以及文本框圆角默认样式的更多相关文章
- 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式
使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角的样式,显得超级恶心,但是我们自己定义 border-radius 为 0 也无法去除这个圆角,经过搜索发现这是 webikt 内核 ...
- css去掉iPhone、iPad默认按钮样式
原文链接:http://blog.sina.com.cn/s/blog_7d796c0d0102uyd2.html 只要在样式里面加一句去掉css去掉iPhone.iPad的默认按钮样式就可以了!~ ...
- 用纯css改变下拉列表select框的默认样式(转)
用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习 关键字 前端 发布 kris 2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息. 在这 ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- 用纯css改变下拉列表select框的默认样式
http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...
- [转载]用纯css改变下拉列表select框的默认样式
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...
- 响应式移动端去除css的hover和jq的hover还有input在苹果下的默认样式
去除css的hover: /*直接给body添加ontouchstart*/ <body ontouchstart> 去除jq的hover: var winW01 = $(window). ...
- Selenium_按钮的点击、文本框的输入和清除操作(3)
from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...
- 纯css改变下拉列表select框的默认样式
下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下* ...
随机推荐
- 1:A+B Problem
总时间限制: 1000ms 内存限制: 65536kB 描述 Calculate a + b 输入 Two integer a,,b (0 ≤ a,b ≤ 10) 输出 Output a + b ...
- windowsapi
内核相关的在:kernel.dll,提供内存管理.进程管理.进程调度.线程管理等等用户相关的在:user32.dll,提供执行用户界面相关的接口界面相关的在:gdi32.dll,提供画图相关的接口
- Arduino101学习笔记(十一)—— 蓝牙BLE
一.BLE技术简介 第四代蓝牙既包括传统的蓝牙,现在标有"蓝牙经典",和新的低功耗蓝牙(Bluetooth LE,或BLE).低数据速率,低功耗优化. 蓝牙LE广播就像一个社区公告 ...
- Linux学习笔记(10)文本编辑器vim
vim是一个功能强大的全屏幕文本编辑器,是Linux/Unix最常用的文本编辑器,其作用是建立.编辑.显示文本文件.vim的特点是没有菜单,只有命令. vim主要有三种工作模式,分别为命令模式.插入模 ...
- LoadRunner中循环操作
Action() { //Loadrunner中的FOR,WHILE,DO 循环语句 int i; int whileloop = 1; //FOR 循环 for (i=1;i&l ...
- lr_save_string 和 sprintf 的使用
lr_save_string 和 sprintf 的使用 一.lr_save_string 使用介绍1.该函数主要是将程序中的常量或变量保存为lr中的参数.格式: //将常量保存为参数 lr_save ...
- Asp.Net Mvc 控制器与视图的数据传递
数据传递也就是控制器和视图之间的交互,比如在视图中提交的数据,在控制器怎么获取,或者控制器从业务层获得一些数据,怎么传递到视图中,让视图显示在客户端呢?带着这些疑问,我们接着看.. 下面 ...
- java.lang.instrument使用
Java在1.5引入java.lang.instrument,你可以由此实现一个Javaagent,通过此agent来修改类的字节码即改变一个类. 程序启动之时启动代理(pre-main) 通过jav ...
- wpf,图片灰化处理
private BitmapSource ToGray(BitmapSource source) { FormatConvertedBitmap re = new FormatConvertedBit ...
- vector初始化
对vector对象来说,直接初始化的方式适用于3种情况:1.初始值已知且数量少:2.初始值是另一个vector对象的副本:3.所有元素的初始值都一样.此外还有一种更常见的情况是4.创建一个vector ...