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;
}

效果如下

相关推荐
Csvn6 小时前
TypeScript:你以为安全的 `JSON.parse` 其实是颗雷 — 运行时类型安全实战
前端·javascript
橘子星6 小时前
深入理解线性数据结构:栈、队列与链表
前端·javascript
dadaobusi6 小时前
Linux内核完成大量内存/调度/时间子系统初始化的关键阶段
java·linux·前端
用户059540174466 小时前
Redis 缓存过期不一致踩坑实录:一个 bug 让我排查了 3 小时,最终用 Pytest 自动化堵上漏洞
前端·css
东风破_6 小时前
AJAX 异步请求:从回调地狱到 async/await,到底解决了什么?
前端
Larcher6 小时前
JS 数据类型的八重人格与内存真相
前端·javascript
星辰徐哥6 小时前
工具推荐:HTML5+AI开发必备的前端调试工具
前端·人工智能·html5
Full Stack Developme6 小时前
Linux Shell 教程概览
linux·前端·chrome
Maimai108086 小时前
Web3 前端实时通信如何落地:从 SSE 订阅到行情、订单与账户状态更新
前端·javascript·react.js·前端框架·web3·状态模式
星辰徐哥6 小时前
技能提升:自然语言处理在HTML5前端的应用
前端·自然语言处理·html5