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

效果如下

相关推荐
烈风逍遥3 分钟前
第五篇:通用 LLM 流式对话:前后端联接的完整实现
前端·后端·架构
aixingpan5 分钟前
aixingpan.cn API开发文档:api_docs_trichart_natal_progression_sec_transit2接口指南
前端·php
江华森15 分钟前
Web 安全实战:验证机制、会话管理、SQL 注入、XSS 与 CSRF
前端
江华森21 分钟前
HTTPS 实战:TLS 握手成本、自制 CA 与证书、三大常见故障
前端
江华森24 分钟前
HTTP 再邂逅:报文结构、请求方法、状态码与 Cookie/Session
前端
szephyr34 分钟前
前端错误监控实战:用 Sentry 把线上报错从“用户反馈“变成“主动发现“
前端·sentry·稳定性·前端监控·错误监控
拖孩41 分钟前
给小程序加「一键发公众号贴图」,我把 wx.shareToOfficialAccount 的三个坑趟了一遍
前端·后端·微信小程序
ONLYOFFICE1 小时前
团队协作软件指南:主要类型、核心功能、选型建议等
前端·onlyoffice·office
志尊宝1 小时前
Vue3 零基础每日笔记(048):嵌套路由与命名视图——后台管理系统布局雏形
前端·javascript·vue.js·笔记·html5