zoukankan      html  css  js  c++  java
  • Trick:如何去掉html标签点击时的蓝色边框

    我们在用html标签时,如input、button、select,img标签时,点击标签经常出现一个蓝色的边框,这个边框真的很low,想要去掉怎么办
    蓝色的边框.jpg
     

    其实,css有样式可以设置一下,这个问题就轻松解决了,这个问题困扰了我很长时间,因为一直没多大影响所以没处理,就一句样式代码: outline:none;


    解决图片超链接有蓝边的问题

    <img src="pic/001.jpg" width=65 >  
    <img src="pic/001.jpg" width=65 border=0 > 
    把border设为0就可以消除蓝色的边框。

    如果用到锚点时候,还是会出现包围框,这时就要用到:CSS属性outline

    <
    style type="text/css">
    a,input,button{ outline:none; }
    ::-moz-focus-inner{border:0px;}
    </style>
    </head>
    <body> 
    <a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>
    <a href="http://www.admin10000.com" target="_blank">admin10000.com</a>
    <input type="button" value="admin10000.com"/>
    <button>admin10000.com</button>
    </body>

    存在bug,其中input,button标签通过私有属性::-moz-focus-inner特别处理

    以上方法在IE6、IE7下无效,可使用 onfocus 属性解决,如下:

      <a href="http://www.admin10000.com" target="_blank"onfocus="this.blur()">admin10000.com</a>
      //使用jquery方法只需一句,非常简单,支持所有浏览器
    
      $("a,input,button").focus(function(){this.blur()});
     
  • 相关阅读:
    $$Ctrl+shift+M分数罗马字母小写
    设置字体大小加粗斜体下划线
    无序列表有序列表
    数学公式插入
    文本居中、代码插入、图片插入
    VM 使用问题 | 安装失败->>注册表
    VM小技巧——虚拟机解决vm窗口太小的办法
    OneNet平台实践
    linux 打包 | autoconf 使用方法
    C 总结 | 复习注意点
  • 原文地址:https://www.cnblogs.com/gitnull/p/9532102.html
Copyright © 2011-2022 走看看