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

效果如下

相关推荐
海绵宝龙16 小时前
Vue 中的 Diff 算法
前端·vue.js·算法
zhougl99616 小时前
vue中App.vue和index.html冲突问题
javascript·vue.js·html
浩泽学编程16 小时前
内网开发?系统环境变量无权限配置?快速解决使用其他版本node.js
前端·vue.js·vscode·node.js·js
狗哥哥16 小时前
Vue 3 插件系统重构实战:从过度设计到精简高效
前端·vue.js·架构
巾帼前端16 小时前
前端对用户因果链的优化
前端·状态模式
不想秃头的程序员16 小时前
Vue3 中 Lottie 动画库的使用指南
前端
锐湃16 小时前
手写agp8自定义插件,用ASM实现路由跳转
java·服务器·前端
wordbaby17 小时前
TypeScript 类型断言和类型注解的区别
前端·typescript
谁是听故事的人17 小时前
vue前端面试指南
前端·vue.js·面试
名字被你们想完了17 小时前
Flutter 实现一个容器内部元素可平移、缩放和旋转等功能(十)
前端·flutter