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

效果如下

相关推荐
Hyyy9 分钟前
流式渲染用react-markdown还是Vercel/Streamdown
前端
风中的小甜瓜40 分钟前
ASP.NET Page 那点事
java·前端·asp.net
木西41 分钟前
告别机械重复:使用 Node.js + Playwright 构建 24 小时全自动测试网领水脚本
前端·javascript·node.js
西柚小萌新1 小时前
【论文写作】--LaTeX详细入门教程2
前端·html
qdkfz1 小时前
JavaScript 如何解析 Outlook .msg 文件 —— @kenjiuno/msgreader
前端·javascript
LuckyDog阿祥1 小时前
卸载Microsoft Edge:EdgeRemover完整操作指南
前端·edge
zhangxingchao1 小时前
AI应用开发九:从 Hermes Agent 学长期记忆
前端·人工智能·后端
xiaofeichaichai2 小时前
Vite原理与Webpack对比
前端·webpack·node.js
_杨瀚博2 小时前
小程序拍证件并局部裁剪
前端