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

  •  深空见闻 如何用DIV+CSS进行网页样式布局

    在CSS中,通过设置list-style为none去除列表项的默认样式,使用float属性使列表项水平排列,使用text-decoration属性去除链接的下划线。还可以设置链接的悬停效果(:hover伪类),以改善用户体验。4. 响应式设计 为了使网页在不同设备上都能良好显示,可以使用媒体查询(@media)进行响应式设计。根据屏幕宽度等...

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

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

  •  誉祥祥知识 网站建设过程中的网页兼容性检测和修复技巧?

    常用库和插件:例如,normalize.css可以消除浏览器默认样式的差异,使网页在不同浏览器中更一致地展示。其他类似的库和插件还包括Modernizr(用于检测浏览器功能并加载相应的CSS和JavaScript)、jQuery(提供跨浏览器的DOM操作和事件处理)等。总结 在网站建设过程中,网页兼容性是一个需要高度重视的问题。为了...

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

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

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

CSS相关话题

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