编程是一场马拉松,而不是百米冲刺。只要你坚持不懈,总有一天会到达终点。
百度360必应搜狗淘宝本站头条
当前位置:网站首页 > HTML 教程 > 正文

如何用css样式去掉默认设备或者浏览器的默认样式

kaishun 2024-04-01 15:28 40 浏览 0 评论

在做html5网站的时候,测试时候会发现在苹果手机上会有一些问题,会发现html5网页中的按钮会被自带的样式给替换了。

如下:

如何用css样式去掉默认设备或者浏览器的默认样式

手机设备下的界面

正常浏览器下的html5界面

要解决该问题需要加入一些css样式,如下:

input[type="button"], input[type="submit"], input[type="reset"] {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

如果还有圆角的问题,

.button{ border-radius: 0; }

在写表单时候会发现一些浏览器对表单赋了默认的样式,如在谷歌浏览器下,文本框和下拉选择框当载入焦点时,会出现发光的边框!文本框textarea可以自由拖拽拉大!在IE10下,文本框输入内容后,会在右侧出现一个小叉叉。面对这些问题,下面来看看解决方法。

去除谷歌等浏览器文本框默认发光边框

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;

}

这样的话,当文本框载入焦点时,边框颜色就会变为橙色,增强用户体验!

去除IE10+浏览器文本框后面的小叉叉

input::-ms-clear {

display: none;

}

禁止多行文本框textarea拖拽

添加属性多行文本框就不能拖拽放大缩小了:

textarea {

resize: none;

}

相关推荐

教你实现背景透明文字不透明全兼容的方法

在div+css网站布局中,经常要用到背景透明,所在背景的文字内容也会跟着透明,但有时文字需求是不透明的,确实让我们web前端开发者很苦恼,解决这个问题方法有二,第一背景用图片,第二那就是用css来...

IE下兼容背景透明度,这一行代码就足够

相信不少小伙伴大部分都写过这样的页面,小编找来了一个例子,比如上面图中,文字的黑色背景。给一段文字加背景透明度的时候都遇见过IE不兼容的问题,下面我们聊聊这些问题的处理方法。如何添加背景透明度我们工作...

《小白HTML5成长之路31》半透明背景的弹窗是怎么用CSS布局的

北方的冬天最怕有风,空气虽然好了,但是异常的冷,吸几口冷风感觉肺都结了冰。一大早小白来到办公室琢磨用户交互方面的问题,看了几个网站发现很多网站的弹窗都是自定义的,而且还把弹窗周围的区域做成了半透明状,...

CSS透明度的使用:rgba和opacity的区别

rgba和opacity的使用1、opacity取值在0到1之间,0表示完全透明,1表示完全不透明。.aa{opacity:0.5;}2、rgbargba中的R表示红色,G表示绿色,B表示蓝色,三种...

css基础快速入门-19 透明transparent

大学生就可以看懂的css基础实战系列,pre标签里是笔记总结,动手实际操作一下会加强理解。有疑问留言交流哦。可能比较枯燥,但是再坚持一下,前端知识的大门就会大开了。<!DOCTYPEhtml&...

php实现excel单元格合并,字体加粗居中等操作

使用的是phpexcel,基本用的原生语法,所见即所得,直接复制下面代码,即可://引用phpexcel类$this->load->library('P...

HTML常用代码之:修改页面的实用性HTML代码

HTML常用代码之:修改页面的实用性HTML代码贴图:<imgsrc="图片地址">加入连接:<ahref="所要连接的相关地址">写上你想写的字</a>在新窗...

IReport导出PDF字体加粗失效 pdf expert导入字体

一、iReport简介说到iReport不得不先介绍Jasperreport,Jasperreport是一个报表制作程序,用户需要按照它制定的规则编写一个XML文件,然后得到用户需要输出的格式文件。...

前端图片压缩上传插件localResizeIMG的使用

我最近做的几个项目,都有图片上传功能。实现图片上传有很多方法,但是要考虑到上传速度、兼容各种浏览器(尤其是各种移动设备)等因素,可选择的没几种,我给大家推荐一种比较好用的上传插件(localResiz...

vue怎么编辑照片 vue如何编辑照片

Vue是一种用于构建用户界面的JavaScript框架,它本身并不提供直接的图像处理功能。但是,我们可以使用Vue结合其他图像处理库来编辑照片。一种常用的图像处理库是`canvas`,它提供了一些功能...

vue的几个提效技巧 vue提升性能

1.动态组件<component:is='组件名'></component>结合v-for循环使用使用环境如图,这是一个v-for渲染的列表(只是目前这个版...

Python-OpenCV开发总结:替换视频绿幕并重新调整大小和位置

在Python中,使用OpenCV(cv2)替换视频的绿幕背景为新的图片,同时还需要调整透明的视频的大小和位置,首先需要解决抠图的问题,因为是替换视频绿幕,所以视频帧抠图后,还需要确保合成的视频的清晰...

开发多年put、get、resize不知道?Java原理分析

前言在分析HashMap之前,先看下图,理解一下HashMap的结构我手画了一个图,简单描述一下HashMap的结构,数组+链表构成一个HashMap,当我们调用put方法的时候增加一个新的key-...

input 输入框,文字和光标之间有个空格

输入框内输入文字后,光标和文字之间,留有一点空隙,使用js方法,给框内的最后文字加个空格;<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Tran...

Vue2的项目自适应屏幕大小 vue自适应布局用什么ui

一方案1.安装npmilib-flexible--savenpminstallpostcss-pxtorem-Dlib-flexible库的新版本:github.com/amfe/li...

取消回复欢迎 发表评论: