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

去除谷歌等浏览器文本框默认发光边框 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: ...
如何用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;
}
2018-07-02
mengvlog 阅读 12 次 更新于 2025-06-21 06:56:56 我来答关注问题0
  • 在写表单时候会发现一些浏览器对表单赋了默认的样式,如在谷歌浏览器下,文本框和下拉选择框当载入焦点时,会出现发光的边框!文本框textarea可以自由拖拽拉大!在IE10下,文本框输入内容后,会在右侧出现一个小叉叉。面对这些问题,下面来看看解决方法。去除谷歌等浏览器文本框默认发光边框 input:focus, ...

  •  文暄生活科普 TailWindCSS学习-默认设置及解读

    增加默认配置:如果你想在 Preflight 之上添加自己的基础样式,只需在 CSS 中的 base 添加这些自定义配置。删除默认配置:如果不想让默认配置生效,只需在基础配置文件中进行修改。

  •  蓝韵文化传媒 ress开发技巧

    在RESS(通常指CSS重置样式表,如normalize.css、minireset或ress等)的开发中,有几个关键的技巧可以提升开发效率和样式的一致性。首先,使用RESS可以帮助开发者在项目的开始阶段就消除浏览器之间的默认样式差异,这有助于创建一个更加干净、一致的视觉基础。其次,在RESS的编写过程中,应当注重代码的简洁性...

  •  猪八戒网 浏览器css兼容问题(css兼容ie)

    -webkit-overflow-scrolling用来控制元素在移动设备上是否使用滚动回弹效果. 解决办法:给所有网页添加如下样式 说明: -webkit-overflow-scrolling:touch;当手指从触摸屏上移开,会保持一段时间的滚动 -webkit-overflow-scrolling:auto;当手指隐山从触摸屏上移开,滚动会立即停止 2.css苹果手机按钮默认样式如何去掉 input[ty...

  •  深空游戏 如何解决浏览器显示内容不一致?

    另外,采用重置CSS可以清除浏览器的默认样式,从而进一步消除浏览器之间的差异。重置CSS通常包含一组规则,用于将各元素的样式重置为统一的基础状态,以便在后续开发中能够更可靠地应用自定义样式。此外,还需要考虑浏览器的自适应特性。现代浏览器通常具备根据设备屏幕宽度自动调整网页内容和布局的功能。这意味...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部