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

效果如下

相关推荐
zhanghaha13145 分钟前
HTML系列教程:17_HTML 框架(frameset、frame、iframe)零基础详解
前端·html
IT_陈寒16 分钟前
React的useEffect依赖项居然骗了我三年
前端·人工智能·后端
一个金牛座的前端22 分钟前
AI 写前端,优化的是演示,不是交付
前端·ai·cursor
球球不吃虾39 分钟前
Nuxt在使用过程中的一些小总结(二)
前端·vue·nuxt
2601_958352904 小时前
A-59U 仅 37mm 却集成 USB + 双波束?
前端·回声消除·语音模块·降噪处理·降噪消回音
泯泷9 小时前
那段文字是谁删的?Yjs 14 正式版之前,一套删除归属方案的实现与边界
前端·javascript·算法
野槐12 小时前
前端项目优化(有了我,会发生...)
前端
aa小小13 小时前
【无标题】
前端
计算机魔术师14 小时前
还在单线程跟 AI 聊天?Claude Code 并行多会话让你一个人干三个人的活
前端
志尊宝14 小时前
Vue3 零基础每日笔记(038):亲手封装 useDebounceFn 与 useThrottleFn——高频事件的流量阀
前端·javascript·vue·html·vue3