H5 处理点击元素高亮、自定义按钮、去除焦点边框

1、设置移动设备上点击元素时出现的高亮颜色

html 复制代码
*{
    -webkit-tap-highlight-color: transparent;
}

2、如果你想要自定义按钮的样式,你可以使用 -webkit-appearance: none; 来移除按钮的默认样式

html 复制代码
.button {
  -webkit-appearance: none;
  appearance: none; /* 兼容性更好的通用语法 */
  border: 1px solid #ccc;
  padding: 10px 20px;
  background-color: #f0f0f0;
  color: #333;
  font-size: 16px;
}

3、当您在输入框(input元素)中输入内容后,某些浏览器会自动为获得焦点的输入框添加一个轮廓(outline),

使用inpt:focu属性去除

html 复制代码
.search input:focus {
    outline: none;
}

效果如下

相关推荐
Highcharts.js9 小时前
Highcharts 云端渲染的真相:交互式图表与服务器端生成的边界
前端·信息可视化·服务器渲染·highcharts·图表渲染
zhuyan10810 小时前
Linux 系统磁盘爆满导致无法启动修复指南
前端·chrome
编程牛马姐11 小时前
独立站SEO流量增长:提高Google排名的优化方法
前端·javascript·网络
NotFound48611 小时前
实战指南如何实现Java Web 拦截机制:Filter 与 Interceptor 深度分享
java·开发语言·前端
Dontla11 小时前
高基数(High Cardinality)问题介绍(Prometheus、高基数字段、低基数字段)
前端·数据库·prometheus
whuhewei14 小时前
为什么客户端不存在跨域问题
前端·安全
妮妮喔妮14 小时前
supabase的webhook报错
开发语言·前端·javascript
yivifu14 小时前
手搓HTML双行夹批效果
前端·html·html双行夹注
奔跑的卡卡15 小时前
Web开发与AI融合-第一篇:Web开发与AI融合的时代序幕
前端·人工智能
IT_陈寒15 小时前
Redis批量删除的大坑,差点让我加班到天亮
前端·人工智能·后端