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

效果如下

相关推荐
程序员黑豆3 小时前
Java 注释详解:单行、多行与文档注释的完整指南
java·前端·ai编程
剪刀石头布啊3 小时前
antd中可编辑表格中巧用useWatch实现联动高性能效果,以及定制延伸学习
前端
油丶酸萝卜别吃4 小时前
前端转全栈学习路线
前端·学习
浮生望4 小时前
前端路由进阶:History API原理与手写HistoryRouter
前端
陆枫Larry5 小时前
JavaScript 中的竞态是什么,为啥会有竟态?
前端
上海安当技术7 小时前
半天接入:USBKey RESTful API + C 动态库,Web 和 C/S 两套集成路径实战
前端·后端·restful·集成·usbkey
DevUI团队7 小时前
从“即兴创作”到“规格先行”,华为云码道(CodeArts)代码智能体持续深耕企业级规范驱动开发能力
前端·人工智能·后端
weixin_431600448 小时前
NestJS 入门(3):Guard 如何挡住未登录请求?
前端·后端·学习·nest.js
kyriewen8 小时前
我用Claude Code两天干完了团队两周的排期——周报发出去那一刻我就后悔了
前端·javascript·ai编程
IT_陈寒9 小时前
JavaScript类型转换把我坑惨了,这破玩意真该早点搞明白
前端·人工智能·后端