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

效果如下

相关推荐
徐同保26 分钟前
Redux和@reduxjs/toolkit同时在Next.js项目中使用
开发语言·前端·javascript
~无忧花开~30 分钟前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
小九今天不码代码32 分钟前
深入理解 CSS 表格布局:table-layout 的秘密与实战详解(附费用报销单案例)
css·前端开发·表格布局·web设计·table-layout·页面优化·样式布局
颜酱43 分钟前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化
海在掘金611271 小时前
从"鬼知道这对象有啥"到"一目了然" - TS接口的实战魔力
前端
spionbo1 小时前
Vue 模拟键盘组件封装方法与使用技巧详解
前端
泉城老铁1 小时前
springboot 对接发送钉钉消息,消息内容带图片
前端·spring boot·后端
顾青1 小时前
微信小程序 VisionKit 实战(二):静态图片人脸检测与人像区域提取
前端·微信小程序
hmfy1 小时前
那些前端老鸟才知道的秘密
前端
野葳蕤1 小时前
react总览
前端