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

效果如下

相关推荐
老章学编程i4 分钟前
Vue工程化开发
开发语言·前端·javascript·vue.js·前端框架
思考的橙子24 分钟前
前端初识之一
前端
tanxiaomi1 小时前
vue 不是spa 单页面应用吗? 配置路由工作模式为history 后 ,为什么配置Nginx的 try_files 可以根据url 找到对应的文件?
前端·vue.js·nginx
果子切克now1 小时前
vue3导入本地图片2种实现方法
前端·javascript·vue.js
谢尔登2 小时前
【移动端】事件基础
前端·javascript·html
敲啊敲95272 小时前
uni-app之旅-day02-分类页面
前端·javascript·uni-app
汪子熙2 小时前
Angular 客户端渲染时,从 ng-state 里读取 SSR 状态的具体逻辑
前端·javascript·angular.js
谢尔登3 小时前
【移动端】Viewport 视口
前端·javascript·html
哇咔咔哇咔3 小时前
【科普】什么是npm和pip?它们之间有什么异同?
前端·npm·pip
二十雨辰3 小时前
[uni-app]小兔鲜-06地址+sku+购物车
前端·javascript·vue.js·uni-app