`

去除点击按钮时出现的虚线框

 
阅读更多

       最近发现,在点击按钮时会在周围出现虚线边框,这些虚线边框可以更好的看清按钮位置所在,便于浏览。但是有些时候我们却不想使用它们,因为浏览器对虚线框的解析有差异,并且不规则,所以看起来反而成为了某种缺陷。所以这种时候,我们想要禁用这些虚线边框,使页面看起来更美观。

       下面介绍去除这些虚线边框的一些方法:

1. outline:none;(较为常用)

优点是代码简洁,使用一行css就能解决问题,但是也有缺点:ie6、ie7并不认识outline属性,需要配合仅ie6和ie7支持的css属性blr:expression_r(this.onFocus=this.blur());使用来达到兼容,expression 条件,这句话的意思是链接在获得焦点的同时失去焦点,但是blr不宜多用,会影响效率。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button class="cart" style="outline:none">
        <img src="../cart.png" alt="购物车的图标"/><a>购物车(0)</a>
    </button>
</body>
</html>
 

2.hidefocus是ie系列的专有属性,能够作用于所有ie序列的浏览器,需要配合css的outline:none。

也可以写作:hidefocus=”hidefocus”;

缺点是非全局控制,需要在每个需要去虚线边框的按钮上加代码。

 

3. onfocus=”this.blur()”;

优点是比较通用。

缺点也有很多,它也是属于局部控制的手段,需要在每一个需要去虚线边框的标签上使用;

然后这是属于script范畴,对于禁用JavaScript的用户来说不起作用;

将script直接写在html中对于页面效率有负面作用。

该方法需要与border:none;配合使用。

 

分享到:
评论

相关推荐

    虚线边框去除

    在某些交互场景下,例如鼠标悬停或点击时去除虚线边框,可以使用CSS伪类: ```css button:hover { border-style: none; } ``` 这样当鼠标悬停在按钮上时,边框就会消失。 5. **JavaScript去除虚线边框** ...

    css实现a“标签点击无虚线.rar

    本教程将深入讲解如何通过CSS来消除`&lt;a&gt;`标签在点击时出现的虚线边框。 首先,我们需要理解`&lt;a&gt;`标签的默认样式是根据浏览器的用户代理样式表设定的。这些样式可能包括了鼠标悬停时显示边框的规则。要改变这种行为...

    纯CSS搞定按钮、链接点击时的虚线

    总的来说,通过CSS的`outline:0`和特定浏览器的解决方案,如`::-moz-focus-inner`,我们可以实现只使用CSS去除按钮和链接点击时的虚线边框。这种方法在大多数现代浏览器中都能很好地工作,但在某些特定的IE版本或...

    win7怎样将桌面图标的虚线框去掉.docx

    在Windows 7操作系统中,有时用户可能会发现当选择桌面图标时,图标周围会出现虚线框。这些虚线框通常被称为“焦点框”或“选择框”,它们是Windows系统为了突出显示被选中对象的一种视觉反馈。尽管这些框并不会对...

    wpf button去掉虚边框

    这种设置配合`FocusVisualStyle`可以完全去除按钮获得焦点时的视觉效果。 ### 三、实现步骤 #### 3.1 直接在XAML中设置 最直接的方法是在XAML中对Button控件进行配置: ```xml 点击我"&gt; ``` 这种方式...

    firefox的超链接点击去除扩大的难看虚线的解决方法

    针对这一问题,有几种方法可以消除Firefox中点击超链接时出现的虚线边框。首先,用户可以通过在Firefox的配置设置中进行修改,但这不是一个推荐的解决方案,因为它会影响到浏览器全局的行为。具体操作是,打开地址栏...

    用css消除button/selcet等控件选中时的虚线框(让页面美观点)

    特别是在处理交互元素如按钮(button)、选择框(select)等时,一个常见的问题就是这些控件在被用户点击或聚焦时会显示默认的虚线边框,这可能与整体设计风格不符。为了解决这个问题,我们可以利用CSS来消除这些...

    快速去除图片水印工具

    打开一张图片,然后使用工具栏的“套索工具”或者“矩形选取工具”选中要去除水印的地方,这时发现图片上出现有相应的虚线选框,直接点击工具栏上绿色的按钮即可执行去除水印的操作。一般一次处理的效果就会比较完美...

    CSS去掉A标签(链接)虚线框的方法

    例如,在使用CSS来设计美观的按钮或图标时,这个默认的虚线框就显得非常突兀,破坏了整体的视觉效果。为了解决这个问题,CSS提供了方法来移除这个焦点时的虚线框。 首先,对于大多数浏览器,比如Firefox,我们可以...

    使用CSS去掉超链接的虚线边框的方法

    在网页设计中,超链接(`&lt;a&gt;`标签)和其他交互元素如输入框(`&lt;input&gt;`)和按钮(`&lt;button&gt;`)在被点击时,可能会显示一个虚线边框,这是浏览器为了帮助用户识别当前焦点所在位置而提供的默认行为。特别是对于使用...

    去掉a标签和按钮加背景图片虚线/阴影完美解决方案

    本文主要介绍如何解决`a`标签和按钮在被点击后出现阴影或虚线边框的问题,这些效果可能会影响页面的整体美感。这个问题通常出现在用户点击`a`标签进行操作,如更换验证码,或者在按钮上应用背景图片时。 首先,让...

    鼠标指向网页图片时图片周围显示虚线框

    在给定的标题和描述中,提及的问题是“鼠标指向网页图片时图片周围显示虚线框”,这正是通过CSS的`:hover`伪类来改变图片边框样式的一个典型应用。 首先,让我们深入理解这段代码的工作原理。在HTML结构中,有一个`...

    怎样去掉word文档页眉下的横线.docx

    然而,默认情况下,当我们在Word文档中添加页眉时,往往会自动出现一条横线位于页眉的底部。这条横线有时可能并不符合我们的设计需求,因此学会如何去除它是非常有用的技能。 #### 工具/原料 - **操作系统**: ...

    图片去水印小工具

    2.打开一张图片,然后使用工具栏的“套索工具”或者“矩形选取工具”选中要去除水印的地方,这时发现图片上出现有相应的虚线选框,直接点击工具栏上绿色的按钮即可执行去除水印的操作。一般一次处理的效果就会比较...

    去掉CAD框选的颜色显示?从左往右和从右往左不一样?.docx

    完成上述设置后,框选时就不会再显示蓝色或绿色的边框,而是采用默认的线条样式。这有助于专注于图形本身,而不受颜色提示的干扰。 此外,文中提到的相关推荐阅读话题,如CAD的MV命令用于调整图纸比例,图层管理器...

    在Word 2021中如何加工剪贴画的详细方法.docx

    此时,剪贴画周围会出现一个带有八条短线控点的虚线边框,这是绘图画布。通过右键点击边框,可以选择对画布进行缩放、旋转等操作。你可以通过拖动控点扩大画布,让剪贴画与边框之间留有空白。选中剪贴画内的元素,...

    14个CSS实用技巧精选推荐 (2).pdf

    2. **Firefox超链接虚线去除**:在Firefox下,点击超链接时会出现虚线边框,可以通过设置`a{outline: none;}`来消除。 3. **页面居中对齐**:若希望固定宽度的页面居中显示,可以将最外层的容器`div`设为相对定位,...

    用PPT2021快速抠图.docx

    这个功能非常实用,尤其当你需要从一张图片中去除不需要的元素,以便更好地适应幻灯片设计或者突出显示特定内容时。下面我们将详细探讨如何利用PPT 2021的“删除背景”功能进行抠图。 **第一步:选择并打开图片** ...

    Excel打印网格线怎么删除.docx

    在Excel的工作表中,网格线通常用于帮助用户组织数据,它们并不是实际打印出来的部分,但在预览或打印时,有时这些网格线会以虚线的形式出现。如果你不希望这些线条出现在最终的打印输出中,可以按照以下步骤进行...

    2022年《办公软件高级应用案例教程(-Office-2016-)》A卷及答案.docx

    6. 在工作表区域执行复制或剪切命令后会出现虚线边框,将其去掉的方法是按Esc键。 知识点:Excel工作表的编辑,虚线边框的去除和Esc键的使用。 7. 关于文档的分栏,下列说法中正确的是当选中“栏宽相等”复选框时...

Global site tag (gtag.js) - Google Analytics