移动端按钮点击默认蓝框效果去除

最新推荐文章于 2024-08-27 09:33:09 发布
最新推荐文章于 2024-08-27 09:33:09 发布
阅读量268 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/xiayedexin/p/4655291.html
本文提供了解决移动端按钮点击后出现蓝色边框问题的CSS代码解决方案，通过设置按钮和输入类型的样式属性，去除不必要的边框效果。

移动端按钮被点击时，外边缘会有蓝框出现，，

下面的代码可以去掉蓝框效果，修复蓝边。

button,
html input[type="button"] {
  outline:none;
}

 

转载于:https://www.cnblogs.com/xiayedexin/p/4655291.html

CSS去除元素的蓝色边框
2301_79326588的博客
10-04 633
当我们在网页中创建链接或者在输入表单中进行输入时，浏览器会默认为相关的元素添加一个蓝色边框，这是为了突出显示当前活动元素。通过使用CSS的outline属性，我们可以轻松地去除元素的默认蓝色边框。然而，请谨慎使用该方法，确保在去除蓝色边框的同时提供其他视觉指示，以保证良好的用户体验。需要注意的是，去除蓝色边框可能会导致用户体验上的问题，因为蓝色边框有助于用户识别当前活动的元素。如果你决定去除蓝色边框，建议在其他方式上提供足够的视觉反馈，以确保用户可以清楚地识别到焦点所在的元素。
aui移动端UI框架
风如白话的博客
05-14 1万+
aui 是一套基于原生javascript开发的移动端UI框架。包含常用js API(如：字符校验、本地定时存储、数组对象处理、ajax原生封装、设备信息获取、手势事件…)；插件(如：loading加载、dialog模态框、toast消息提示、picker多级联动…)；UI组件(如：button按钮、tag标签、card卡片…)；常用模板(如：侧滑菜单、加入购物车动画、星级评价、图片上传预览裁剪、选项卡…)。
去除移动端点击蓝框阴影
九段刀客的博客
02-18 385
// 去掉移动端点击阴影 /*这一句是用来解决在安卓上的点击出现篮框问题*/ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /*下面是解决ios上去除微信点击蓝色边框 */ a:focus, input:focus, p:focus, div:focus { -webkit-tap-highlight-color: rgba...
移动端点击可点击元素时，出现蓝色默认背景色
weixin_30733003的博客
10-26 636
web页面放在移动端，点击button 标签或者添加了cursor:pointer 样式的标签，会出现 蓝色背景色， 解决方案： 给相应标签 或者直接在body 标签上添加 样式： -webkit-tap-highlight-color: transparent; 或者 -webkit-tap-highlight-color:rgba(0,0,0,0); 适用场景：button 和 a标签 转载...
取消移动端按钮按钮点击时的蓝色背景
dandelionoooo的博客
12-19 1163
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none   不知道是哪个元素起了作用，姑且先存着项目赶完再补上...
去除手机浏览器按钮点击出现的高亮框
每天多懂一点点
01-14 4054
在工作中经常遇到在手机浏览器中浏览网页时，点击页面中的按钮或者是具备点击事件的元素，就会出现一个默认的高亮框，影响整体的感观体验。 我们可以用一个简单的css3属性就能加以解决，该属性就是： -webkit-tap-highlight-color 举个栗子： 对该按钮加上相应的css样式： -webkit-tap-highlight-color: rgba(0,0,0,0); -
取消按钮在移动端点击时的背景颜色
a97156000的博客
08-15 644
一、取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; 二、使用图片作为a标签的点击按钮时，当触发touchstart的时候，往往会...
详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）
12-14
本篇文章将详细讲解如何去除`input`输入框在Android和iOS设备上的默认白色背景和边框，从而实现更加美观、协调的界面效果。 首先，问题的起因在于开发者在创建一个订单查询功能时，使用了`<input type="date">`标签...
CSS去除移动端点击时元素产生的背景色 （推荐）
09-22
对于iOS设备中`input`框点击时的灰色背景，也可以用`-webkit-tap-highlight-color`来处理： ```css input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } ``` 总结来说，通过合理使用`-webkit-tap-...
Web前端----移动端库和bootstrap框架
Python美丽星球--微信(Felixzfb)
11-26 1250
Web前端笔记 第十一部分：js移动端库和bootstrap框架，re正则 1. 移动端js事件 移动端的操作方式和PC端是不同的，移动端主要用手指操作， 所以有特殊的touch事件，touch事件包括如下几个事件： 1、touchstart: //手指放到屏幕上时触发 2、touchmove: //手指在屏幕上滑动式触发 3、touchend: //手指离开屏幕时触发 4、touchcanc...
使用CSS 取消手机端 点击元素 出现的蓝色背景效果
罗小文
09-13 839
css 取消元素聚焦背景 （手机端）
移动端点击出现蓝色框的解决方案
weixin_43170484的博客
09-17 4220
/这一句是用来解决在安卓上的点击出现篮框问题/ body{ -webkit-tap-highlight-color:rgba(0,0,0,0); } /下面是解决ios上去除微信点击蓝色边框 / a:focus, input:focus, p:focus, div:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-us...
如何去掉bootstrap按钮点击后的蓝框？
weixin_44022064的博客
09-16 1138
在所需的类上面加outline:none 这个css样式； 如果不想要所有的效果 ： .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus{ outline:none; } ...
移动端浏览器 点击或触摸链接时出现蓝色背景，解决办法。
最新发布
weixin_45792390的博客
08-27 1033
移动端浏览器（尤其是基于 WebKit 的浏览器，如 iOS Safari 和 Android Chrome）在用户点击或触摸链接时，会添加蓝色背景。这是为了给用户一个视觉反馈，让他们知道点击操作已被触发。这种反馈机制是浏览器内置的默认行为，用于提高用户体验，尤其是在触摸屏设备上。触摸反馈机制：移动设备上没有鼠标悬停效果，因此当用户触摸屏幕时，浏览器会以蓝色背景高亮链接，表示点击操作已被识别。这是替代鼠标悬停的一种反馈。可访问性：这种视觉反馈可以帮助用户确认他们点击了正确的链接或按钮，从而增强交互体验。
解决手机网站点击出现蓝色框的问题
weixin_30393907的博客
12-16 246
加上css样式html *{webkittaphighlightcolor:rgba(255,255,255,0);}把透明度设置为0即可解决 转载于:https://www.cnblogs.com/ll-taj/p/5050287.html
redis分布式锁的实现（setNx命令和Lua脚本）
热门推荐
lzf的博客
05-27 8万+
前言 本篇文章主要介绍基于Redis的分布式锁实现到底是怎么一回事，其中参考了许多大佬写的文章，算是对分布式锁做一个总结 分布式锁概览 在多线程的环境下，为了保证一个代码块在同一时间只能由一个线程访问，Java中我们一般可以使用synchronized语法和ReetrantLock去保证，这实际上是本地锁的方式。但是现在公司都是流行分布式架构，在分布式环境下，如何保证不同节点的线程同步执行呢？ 实际上，对于分布式场景，我们可以使用分布式锁，它是控制分布式系统之间互斥访问共享资源的一种方式。 比如说
基于Redis的分布式锁实现
weixin_33883178的博客
04-25 818
前言 本篇文章主要介绍基于Redis的分布式锁实现到底是怎么一回事，其中参考了许多大佬写的文章，算是对分布式锁做一个总结 分布式锁概览 在多线程的环境下，为了保证一个代码块在同一时间只能由一个线程访问，Java中我们一般可以使用synchronized语法和ReetrantLock去保证，这实际上是本地锁的方式。但是现在公司都是流行分布式架构，在分布式环境下，如何保证不同节点的线程同步执行呢？ 实...
取消html 移动端 onclick点击事件高亮效果
ihoudf
07-20 7445
-webkit-tap-highlight-color:rgba(0,0,0,0) //webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节。 原因如下： 在移动端上，有事件监听的元素被点击的时候会被高亮显示，而-webkit-tap-highlight-color属性会在当用户点击iOS的Safari浏览器中的链接或JavaSc
Bootstrap-3.3.5：提升移动端界面设计的框架
版本3是在2013年发布的，它相比早期版本主要的变更在于采用了扁平化设计，去除了渐变和阴影效果，并且更加注重移动设备的响应式设计。3.3.5是这个版本的维护更新，它修补了之前版本中发现的一些bug和安全漏洞。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值