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

效果如下

相关推荐
CarIise43 分钟前
下拉菜单HTML/CSS/JS实现
前端·css
2601_962071571 小时前
Java进阶(vue基础)
前端·javascript·vue.js
研☆香1 小时前
数组方法 splice讲解 拓展
开发语言·前端·javascript
码视野1 小时前
基于 Spring Boot + Vue3 的【城市地下燃气管网微泄漏感知与相邻地下空间燃爆预警中台】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端
淡海水1 小时前
05-03-栈队列-PriorityQueue-TElement-TPriority-NET6优先队列语义与四叉堆实现
服务器·前端·c#·priorityqueue·clr·telement
ITresearchGuest2 小时前
LangChain JS 入门:快速搭建前端 AI 开发环境
前端·javascript·langchain
YHHLAI2 小时前
React + TypeScript 实战:从零构建颜色选择器应用
前端·react.js·typescript
Profile排查笔记2 小时前
指纹浏览器手机版怎么选?从本地 App 到云端 Android 的实现方式解析
前端·人工智能·后端·自动化
浪兎兎2 小时前
Vue CLI笔记
前端·vue.js·笔记
Csvn2 小时前
Proxy / Reflect 与响应式原理:完整手写一个 mini Vue3 响应式系统
前端