移除手机端a标签点击自动出现的边框和背景

最新推荐文章于 2024-10-02 15:35:50 发布
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量93 收藏
点赞数
文章标签： css html git 人工智能 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_lihuijie/article/details/118594043
版权

手机端a标签会自动补充出现边框或者背景，使得用户知道a标签的点击状态，但样式很不好看

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        a{
            border:none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-tap-highlight-color:transparent;
            outline:none；
            }
    </style>
  </head>
  <body>
    <a href="https://www.baidu.com/">测试边框</a>
  </body>
</html>

其中对a添加样式

a{
            border:none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-tap-highlight-color:transparent;
            outline:none；
            }

-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent; 都可以将该阴影透明化，进而解决那个丑丑的边框问题
木子啊
关注
PC 端微信页面拆分及 JavaFx 使用
bugstack虫洞栈
09-22 3028
一、前言 对于一个知识点的学习过程来说，往往使用自己熟悉的工具或方式才更易于上手。因为所有同类型的知识点在抛出复杂的流程拨云见日后，所能得到的几乎都是同样的设计思想和实现理论。 在 Java 语言桌面版开发中，直至目前共提供了三套 UI 开发方式；Awt、Swing、JavaFx，以及一些扩展组件 SWT 等。在这三套 UI 组件中，JavaFx 是最新也是最为好用的，因为他提供了丰富的功能，以及...
统信系统UOS桌面版V20 用户手册
热门推荐
Reyn_观极
07-27 1万+
UOS桌面版V20用户手册。
iframe 小试
dingjingchao的博客
08-19 727
1.引入jquery 方便使用工厂函数 2.模拟.html编写 html>head>meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge,
C++拷贝构造函数详解
zhupfcsdn的博客
09-14 218
一. 什么是拷贝构造函数 首先对于普通类型的对象来说，它们之间的复制是很简单的，例如： [c-sharp] <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" target="_blank">view plai
CSS杂记（一）
MoeCodeFree的博客
09-06 191
CSS杂记 浏览器 组成部分 shell 内核：渲染引擎/JS引擎 常用浏览器 Google Chrome webkit/blink(内核) Safari webkit Firefox gecko IE trident Opera presto CSS cascading style shee
【译】Creating a Markdown editor/previewer in Electron and Vue.js
omnispace的博客
09-05 1004
使用Electron编写桌面应用程序是迄今为止我在职业生涯中使用过的最简单，最令人愉快的GUI应用程序工具包。 Electron是Atom，Visual Studio Code，Slack桌面客户端，Postman，GitKraken和Etcher等流行应用程序中使用的工具包。 每个都是功能强大，高性能，跨平台的应用程序，具有丰富的用户体验，为用户提供卓越的功能，每个平台上具有相同的用户界面界面，...
HTML三段式右侧栏,HTML5 - 经典的上中下三段式布局（并使用<nav>实现侧边导航链接）...
weixin_35323111的博客
06-02 736
这个是一个典型的三段式部局，上下两块分别是网页头部与尾部。中间区域又分为左边的侧边栏区域和右边的内容主体区域。1，效果图如下：2，页面元素说明：(1)在最外层我们添加了一个wrapper，把所有的页面元素都包在里面。好处是便于调整整个页面的最大最小宽度，以及是否让页面居中等。(2)中间区域，侧边栏是固定宽度，右侧内容区域是自适应宽度。(3)过去我们会把整个侧边栏都放在一个中，到了HTML5，使用两...
jQuery手机端搜索框样式代码.zip
07-05
此外，可能还应用了一些自定义的CSS样式，如圆角、边框、阴影和背景色，以提升视觉效果。 核心功能之一是删除输入的搜索内容。这通常通过添加一个清除图标（通常是“×”）到输入框内来实现。当用户点击这个图标时...
移动端网页布局注意事项及解决 1.winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 <meta name="msapplication-tap-highlight" c
lomenw的博客
06-01 3947
移动端网页布局注意事项及解决 1.winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 1、关闭iOS键盘首字母自动大写 2、禁止文本缩放 html { -webkit-text-size-adjust: 100%; } 3、移动端如何清除输入框内阴影 在iOS上，输入框默认有内部阴影，但无法使用 box-sha
Flutter 笔记 | Flutter 中的路由、包、资源、异常和调试
川峰的博客
05-21 1694
Flutter中的路由、包、资源和调试相关内容笔记。Flutter中的路由、包、资源和调试相关内容笔记。Flutter中的路由、包、资源和调试相关内容笔记。Flutter中的路由、包、资源和调试相关内容笔记。Flutter中的路由、包、资源和调试相关内容笔记。Flutter中的路由、包、资源和调试相关内容笔记。Flutter中的路由、包、资源和调试相关内容笔记。Flutter中的路由、包、资源和调试相关内容笔记。Flutter中的路由、包、资源和调试相关内容笔记。Flutter中的路由、包、资源和调试相关内
如何去除android、ios上[a/button/input]标签产生的边框/灰色背景？
chourenchan4303的博客
01-02 526
前段时间在做移动端手机网站时，没有发现有什么问题，但是在测试阶段，却发现了不少bug，为了不影响全局效果，怎么得也要解决这些问题，既算是工作回忆，也算是工作上的一点小总结，避免以后再出错。 在ios4+和android2+系统，当手指触摸屏幕a标签链接或button按钮时，会产生边框效...
html 去除点击效果,怎样去掉a标签点击时的虚线边框
weixin_39926040的博客
06-03 1187
有的浏览器如Firefox，在a标签(链接)点击后会留下一个虚线边框，影响美观，如下图所示：我们如果想a标签(链接)在点击后不要留下虚线边框，要怎么做呢？其实，我们可以从css来设置，达到要求。css代码如下：a {outline:none;}代码解释，给a标签定义一个 outline:none; 的属性，是告诉a标签不要外部边框。CSS outline 属性定义和用法outline (轮廓)是绘...
解决移动端a标签点击有边框问题
ljmkmnkl的博客
05-01 727
在做移动端开发时对a标签点击时会出现一个有颜色的边框，用-webkit-tap-highlight-color:rgba(0,0,0,0); 可以祛除
css1像素下边框问题
王帅鸣的博客
04-23 480
1px下边框显示问题 今天做移动端项目时在ui设计图稿出现了1px的下边框线 但是在我实际做项目中 border-bottom:1px solid #ccc; 如图，直接设置会发现实际比1px要粗很多 代码设置的时1px，但是实际为4px，比ui稿上还要粗，一下被我的像素眼给发现了，在论坛中找到的方法，觉得挺实用的，可以记录一下，方便以后查找。 产生的原因 这种问题产生的原因是因为随着科技的进步，各个设备的像素变得越来越高，1px显然在有点设备上为虚拟单位，甚至显示不到，会出现两种问题： 1.老设备，
CSS画出三角形的做法
mingangel的博客
10-01 327
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 325
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS 盒子属性
m0_74012211的博客
10-02 320
CSS 盒子属性
【CSS】position
最新发布
小秀的博客
10-02 237
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
jquery点击a标签添加类名，再次点击a标签移除类名
04-24
可以使用以下代码实现： ``` $('a').click(function() { if($(this).hasClass('active')) { $(this).removeClass('active'); } else { $('a').removeClass('...这样就可以实现点击a标签添加和移除类名的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值