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

效果如下

相关推荐
Rkgua1 分钟前
Flexbox 与 Grid 布局
前端·css
C澒5 分钟前
面向前端自测的智能 Mock 系统架构设计与全流程落地
前端·ai
西洼工作室7 分钟前
python邮箱令牌/点击验证、邮箱验证码实现
前端·python
iCxhust34 分钟前
在 emu8086 中可以直接编译运行的完整汇编程序,演示数组的定义、遍历、求和、求最大值。
开发语言·前端·javascript·汇编·单片机·嵌入式硬件·算法
JianZhen✓38 分钟前
2026前端高频面试题总结(Vue/JS/网络/Webpack/性能优化/手写)
前端·javascript·vue.js
里欧跑得慢42 分钟前
Flutter 主题管理:构建一致的用户界面
前端·css·flutter·web
龙猫里的小梅啊1 小时前
CSS(八)CSS显示模式display属性
前端·css·css3
雨季mo浅忆1 小时前
第二项目重新梳理
前端·面试
李白的天不白1 小时前
webpack 与 vue-loader 版本冲突问题
前端·vue.js·webpack