精华内容
下载资源
问答
  • 1、问题:button按钮的边框,通过css样式设置不显示,但点击是会出现 2、解决:配置按钮的光标事件和边框属性 3、实现代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> &...

    1、问题:button按钮的边框,通过css样式设置不显示,但点击是会出现

    2、解决:配置按钮的光标事件和边框属性

    3、实现代码

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>按钮的边框</title>
        <style>
       	 	#btn{
    	   	 	width: 150px;
    	   	 	height: 35px;
    	   	 	border-radius:2em;
    	   	 	background-color: green;
    	   	 	color:#ffffff;
    	   	 	border: 0px;
       	 	}
       	 	#btn:focus{outline:0;}
        </style>
      </head>
      
      <body>
         <button id="btn">这是按钮</button>
      </body>
    </html>

    PS:a标签也可以用

     a:focus{outline: none}

    其他元素,可自行根据语法替换

    展开全文
  • a,input,button{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);} 或a,button,input{outline: none; -webkit-tap-highlight-color: rgba(255, ...

    a,input,button{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);}

    或a,button,input{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-modify: read-write-plaintext-only;}

    展开全文
  • } 多重边框 利用重复指定box-shadow来达到多个边框的效果 在线演示 /*CSS Border with Box-Shadow Example*/ div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0,...

    b1c3a491009bf173aa42fe5467651c27.png

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来。现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容。

    HTML篇

    浏览器地址栏运行JavaScript代码

    这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开头后跟要执行的语句。比如:

    javascript:alert('hello from address bar :)');

    将以上代码贴到浏览器地址栏回车后alert正常执行,一个弹窗神现。

    需要注意的是如果是通过copy paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行JS代码,sigh~

    这一技术在我的另一篇博文《让Chrome 接管邮件连接,收发邮件更方便了》中有使用到,利用在浏览器地址栏中执行JavaScript代码将Gmail设置为系统的邮件接管程序。

    浏览器地址栏运行HTML代码

    如果说上面那条小秘密知道的人还算多的话,这条秘笈知道的人就要少一些了,在非IE内核的浏览器地址栏可以直接运行HTML代码!

    比如在地址栏输入以下代码然后回车运行,会出现指定的页面内容。

    data:text/html,<h1>Hello, world!</h1>

    9f8ace135dbc0a83e54d9f17e9c8ad54.png

    你造么,可以把浏览器当编辑器

    还是浏览器地址栏上做文章,将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器,与Windows自带的notepad一样,吼吼。

    data:text/html, <html contenteditable>

    ba41c4940e6fe57be2d46ad0e9d63332.png

    归根结底多亏了HTML5中新加的contenteditable属性,当元素指定了该属性后,元素的内容成为可编辑状态。

    推而广之,将以下代码放到console执行后,整个页面将变得可编辑,随意践踏吧~

    document.body.contentEditable='true';

    bd229cecd75e87cbd6ecba58691f5137.png

    利用a标签自动解析URL

    很多时候我们有从一个URL中提取域名,查询关键字,变量参数值等的需要,而万万没想到可以让浏览器方便地帮我们完成这一任务而不用我们写正则去抓取。方法就在JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性,然后就得到了一切我们想要的了。

    var a = document.createElement('a');
     a.href = 'http://www.cnblogs.com/wayou/p/';
     console.log(a.host);

    9a37cdcc3d455549310520a4dba7cb35.png

    利用这一原理,稍微扩展一下,就得到了一个更加健壮的解析URL各部分的通用方法了。下面代码来自James的博客。

    function parseURL(url) {
        var a =  document.createElement('a');
        a.href = url;
        return {
            source: url,
            protocol: a.protocol.replace(':',''),
            host: a.hostname,
            port: a.port,
            query: a.search,
            params: (function(){
                var ret = {},
                    seg = a.search.replace(/^?/,'').split('&'),
                    len = seg.length, i = 0, s;
                for (;i<len;i++) {
                    if (!seg[i]) { continue; }
                    s = seg[i].split('=');
                    ret[s[0]] = s[1];
                }
                return ret;
            })(),
            file: (a.pathname.match(//([^/?#]+)$/i) || [,''])[1],
            hash: a.hash.replace('#',''),
            path: a.pathname.replace(/^([^/])/,'/$1'),
            relative: (a.href.match(/tps?://[^/]+(.+)/) || [,''])[1],
            segments: a.pathname.replace(/^//,'').split('/')
        };
    }

    页面拥有ID的元素会创建全局变量

    在一张HTML页面中,所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量,这意味着document.getElementById像人的阑尾一样显得多余了。但实际项目中最好老老实实该怎么写就怎么写,毕竟常规代码出乱子的机会要小得多。

    <div id="sample"></div>
    <script type="text/javascript">
            console.log(sample);
    </script>

    0da4a8d101c33666b6fd46b735a821d5.png

    加载CDN文件时,可以省掉HTTP标识

    现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件,出于安全考虑有的CDN服务器使用HTTPS方式连接,而有的是传统的HTTP,其实我们在使用时可以忽略掉这个,将它从URL中省去。

    <script src="//domain.com/path/to/script.js"></script>

    这一点在之前一篇译文博客《jQuery编程最佳实践》中也有提到。

    利用script标签保存任意信息

    将script标签设置为type='text'然后可以在里面保存任意信息,之后可以在JavaScript代码中很方便地获取。

    <script type="text" id="template">
    	<h1>This won't display</h1>
    </script>
    var text = document.getElementById('template').innerHTML

    CSS篇

    关于CSS的恶作剧

    相信你看完以下代码后能够预料到会出现什么效果。

    *{
        cursor: none!important;
    }

    442ca3067db5a4f66f0c4b4439a8c00f.png

    简单的文字模糊效果

    以下两行简单的CSS3代码可达到将文字模糊化处理的目的,出来的效果有点像使用PS的滤镜,so cool!

    p {
        color: transparent;
        text-shadow: #111 0 0 5px;
    }

    cc6e75e0497921a4b59f5e6a2fc18333.png

    垂直居中

    有好多次博主都有这样的需求,垂直居中显示某个DIV,我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。

    当然你可以将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现,但此种实现往往会因为display:table而破坏整体布局,那还不如直接用table标签了呢。

    下面这个样式利用了translate来巧妙实现了垂直居中样式,需IE9+。

    .center-vertical {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    相比而言,水平居中要简单得多,像上面提到的text-align:center,经常用到的技巧还有margin:0 auto。但对于margin大法也只在子元素宽度小于容器宽度时管用,当子元素宽度大于容器宽度时此法失效。

    如法炮制,利用left和transform同样可实现水平居中,不过意义不大,毕竟text-align和margin差不多满足需求了。

    .center-horizontal {
        position: relative;
        left: 50%;
        transform: translateX(-50%); 
    }

    多重边框

    利用重复指定box-shadow来达到多个边框的效果

    在线演示

    /*CSS Border with Box-Shadow Example*/
    div {
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
        height: 200px;
        margin: 50px auto;
        width: 400px
    }

    1ef8976a92eb15476eba2ca2e8075c54.png

    实时编辑CSS

    通过设置style标签的display:block样式可以让页面的style标签显示出来,并且加上contentEditable属性后可以让样式成为可编辑状态,更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。拥有此技能者,逆天也!

    <!DOCTYPE html>
    <html>
        <body>
            <style style="display:block" contentEditable>
            	body { color: blue }
            </style>
        </body>
    </html>

    8f469c0ca355cf49c2d8a87f1862ced0.png

    创建长宽比固定的元素

    通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的,这在响应式页面设计中比较有用,能够保持元素不变形。

    <div style="width: 100%; position: relative; padding-bottom: 20%;">
        <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
            this content will have a constant aspect ratio that varies based on the width.
        </div>
    </div>

    629580c4ad40f53e4fbb1483030206cb.png

    CSS中也可以做简单运算

    通过CSS中的calc方法可以进行一些简单的运算,从而达到动态指定元素样式的目的。

    .container{
    	background-position: calc(100% - 50px) calc(100% - 20px);
    }

    JavaScript篇

    生成随机字符串

    利用Math.random和toString生成随机字符串,来自前一阵子看到的一篇博文。这里的技巧是利用了toString方法可以接收一个基数作为参数的原理,这个基数从2到36封顶。如果不指定,默认基数是10进制。略屌!

    function generateRandomAlphaNum(len) {
        var rdmString = "";
        for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
        return rdmString.substr(0, len);
    }

    68297dbac860dff0835b9195345d0384.png

    整数的操作

    JavaScript中是没有整型概念的,但利用好位操作符可以轻松处理,同时获得效率上的提升。

    |0和~~是很好的一个例子,使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。性能比较见此。

    var foo = (12.4 / 4.13) | 0;//结果为3
    var bar = ~~(12.4 / 4.13);//结果为3

    顺便说句,!!将一个值方便快速转化为布尔值 !!window===true 。

    重写原生浏览器方法以实现新功能

    下载的代码通过重写浏览器的alert让它可以记录弹窗的次数。

    (function() {
        var oldAlert = window.alert,
            count = 0;
        window.alert = function(a) {
            count++;
            oldAlert(a + "n You've called alert " + count + " times now. Stop, it's evil!");
        };
    })();
    alert("Hello World");

    关于console的恶作剧

    关于重写原生方法,这里有个恶作剧大家可以拿去寻开心。Chrome的console.log是支持对文字添加样式的,甚至log图片都可以。于是可以重写掉默认的log方法,把将要log的文字应用到CSS的模糊效果,这样当有人试图调用console.log()的时候,出来的是模糊不清的文字。好冷,我表示没有笑。

    是从这篇G+帖子的评论里看到的。使用之后的效果是再次调用log会输出字迹模糊不清的文字。

    var _log = console.log;
    console.log = function() {
      _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
    };

    6234832b56528a135b4bc5eab2ffc74a.png

    不声明第三个变量的值交换

    我们都知道交换两个变量值的常规做法,那就是声明一个中间变量来暂存。但鲜有人去挑战不声明中间变量的情况,下面的代码给出了这种实现。蛮有创意 的。

    var a=1,b=2;a=[b,b=a][0];

    de166af5e050243ed0c2327a3ec6c177.png

    万物皆对象

    在JavaScript的世界,万物皆对象。除了null和undefined,其他基本类型数字,字符串和布尔值都有对应有包装对象。对象的一个特征是你可以在它身上直接调用方法。对于数字基本类型,当试图在其身上调用toString方法会失败,但用括号括起来后再调用就不会失败了,内部实现是用相应的包装对象将基本类型转为对象。所以(1).toString()相当于new Number(1).toString()。因此,你的确可以把基本类型数字,字符串,布尔等当对象使用的,只是注意语法要得体。

    同时我们注意到,JavaScript中数字是不分浮点和整形的,所有数字其实均是浮点类型,只是把小数点省略了而以,比如你看到的1可以写成1.,这也就是为什么当你试图1.toString()时会报错,所以正确的写法应该是这样:1..toString(),或者如上面所述加上括号,这里括号的作用是纠正JS解析器,不要把1后面的点当成小数点。内部实现如上面所述,是将1.用包装对象转成对象再调用方法。

    If语句的变形

    当你需要写一个if语句的时候,不妨尝试另一种更简便的方法,用JavaScript中的逻辑操作符来代替。

    var day=(new Date).getDay()===0;
    //传统if语句
    if (day) {
    	alert('Today is Sunday!');
    };
    //运用逻辑与代替if
    day&&alert('Today is Sunday!');

    比如上面的代码,首先得到今天的日期,如果是星期天,则弹窗,否则什么也不做。我们知道逻辑操作存在短路的情况,对于逻辑与表达式,只有两者都真才结果才为真,如果前面的day变量被判断为假了,那么对于整个与表达式来说结果就是假,所以就不会继续去执行后面的alert了,如果前面day为真,则还要继续执行后面的代码来确定整个表达式的真假。利用这点达到了if的效果。

    对于传统的if语句,如果执行体代码超过了1 条语句,则需要加花括号,而利用逗号表达式,可以执行任意条代码而不用加花括号。

    if(conditoin) alert(1),alert(2),console.log(3);

    上面if语句中,如果条件成立则执行三个操作,但我们不需要用花括号将这三句代码括起来。当然,这是不推荐的,这里是冷知识课堂:)

    禁止别人以iframe加载你的页面

    下面的代码已经不言自明了,没什么好多说的。

    if (window.location != window.parent.location) window.parent.location = window.location;

    console.table

    Chrome专属,IE绕道的console方法。可以将JavaScript关联数组以表格形式输出到浏览器console,效果很惊赞,界面很美观。

    //采购情况
    var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
    console.table(data);

    a5cb05c06c92627e11822bc4e36367e9.png

    REFERENCE

    • What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about?
    • 45 Useful JavaScript Tips, Tricks and Best Practices
    • 10 Small Things You May Not Know About Javascript
    原作者:刘哇勇
    原出处:刘哇勇的部落格
    原文链接:前端不为人知的一面--前端冷知识集锦 - 刘哇勇 - 博客园
    展开全文
  • 去除button自带边框

    千次阅读 2018-12-20 10:27:44
    加入css样式去除button边框 例如 .share-btn::after { border: none; } 下面的话很重要!!! 注意 : button有个plain属性 (按钮是否镂空,背景色透明) , 这个属性不要设置为true , 要不然你自己加的去除边框会失效 ...

    小白
    去除button的自带boder
    加入css样式去除button边框
    例如
    .share-btn::after {
    border: none;
    }
    下面的话很重要!!!
    注意 : button有个plain属性 (按钮是否镂空,背景色透明) , 这个属性不要设置为true , 要不然你自己加的去除边框会失效 .

    展开全文
  • 主要介绍了微信小程序中button去除默认的边框的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 如何去除button固有的边框

    千次阅读 2019-05-20 18:45:14
    button的固有边框写在它的::after属性里,所以: html: <button class="myBtn"></button> Css: .myBtn::after{ border:none; } 忘记是哪里看到的了,所以我标注转载,就当是一个小tip吧。写下来...
  • 去除button点击后出现的边框

    千次阅读 2017-02-27 15:32:36
    button{ outline:none; }
  • <button class="operation-list" type="button" open-type="share">分享</button> 做小程序时,给文章底部添加分享、收藏... 没反应,后来使用伪元素才去除边框,如下 .operation-list::after{ ...
  • button点击出现边框

    2019-05-21 12:05:50
    Button按钮点击后出现蓝色边框在修改button按钮样式之后,点击button按钮出现了蓝色边框 在修改button按钮样式之后,点击button按钮出现了蓝色边框 添加css属性,这样在点击安按钮的时候就不会有蓝色边框了。 ...
  • Android-去除Button默认边框

    千次阅读 2019-05-19 22:32:17
    <Button ... style="?android:attr/borderlessButtonStyle" ... />
  • 用setData修改对象的属性值 1. Page({ data: { items:{ //items为一个对象,is_like和like分别为其两个属性 is_like: 0, like: 0 } }, likes: function () { var is_like ="items.is_like";...
  • button按钮去除边框

    千次阅读 2019-01-07 21:47:00
    前端萌新,如有不当之后,请多多赐教哦! 其他方法什么border:none ,border-color:transparent 都没用,这个试了有效果了
  • MFC的button控件是一个不同于其他控件,其CButtton类是CWnd的一个子类,在修改button的背景、颜色和边框的时候必须自己进行编写一个新的类,如CMyButton。下面是进行背景、颜色、边框修改的步骤: 1.在项目->添加...
  • 微信小程序去除button默认边框

    千次阅读 2019-01-23 11:41:05
    微信小程序去除默认边框 button::after{ border: none; } 亲测有效
  • 微信小程序去除button按钮边框样式

    千次阅读 2019-04-03 12:44:24
    在html和小程序中去除button按钮的样式是不一样的 HTML: button{ border:none; background:none; } 在小程序里要去除border正确写法如下(其他正常写就可以): button::after{ border:none; } demo如图 ...
  • button带一个灰色的边框,很难看,有时反复操作之后边框会消失,google了一下html focus border,问题得解:outline:none
  • button 移除点击后的边框

    千次阅读 2018-08-02 14:29:37
    添加一下css 就可以 .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; border-color: transparent; box-shadow:none;...}...
  • 点击按钮时出现轮廓(input输入框也有),如下图: 解决方法:在css中加入outline: none input{ outline: none } button{ outline: none } Ps:注:outline (轮廓)是绘制于元素周围的一条线,位于边框...
  • 标题使用C#windows应用窗体时去除里面Button边框 1、这里是默认添加的Button,四周有边框 2、我尝试点击这个Button边框更明显 3、而我想要的是这种,点击之后不带边框 4、具体实施 第一步,打开添加Button的...
  • html去除input聚焦时的边框 html中,当input标签获取焦点的时候, input标签外围会出现边框,有的时候我们需要...bootstrap的button按钮点击之后会有边框怎么解决? .btn:focus,.btn:active:focus,.btn.active:fo...
  • button按钮如何去掉点击边框

    千次阅读 2020-05-29 15:50:58
    正常我们写完后,给div这几样式时,点击边框一直存在 发现无论我们怎么设计点击后的效果,这个边框还是存在,后来我尝试了这个方法 outline: none 发现点击后确实没有了,但是一直按着边框就会出现 所以应该时...
  • 在微信小程序中使用button的时候,会有一个默认的... 之后只是去除了按钮的背景颜色,并没有去掉其默认边框。 后来在查阅了资料之后发现给button的后伪元素设置 border:none; 才可以去掉button边框button::a...
  • CSS去除input和button默认黑色边框

    千次阅读 2021-01-29 23:30:26
    今天在练习用纯JS写登录页面的时候遇到了样式问题,就是我设置边框是青色的,但是鼠标悬浮、和鼠标点击时候竟然多出了一个难看的黑色边框,以前都是用各种UI框架,从不会出现这个问题。经查才发现竟然有个CSS属性较...
  • 去除按钮点击边框

    2018-12-21 20:00:00
    button{  outline:none; } button:active{  outline:none; } …… 转载于:https://www.cnblogs.com/em2464/p/10158675.html
  • el-button 要想按钮普通情况没有边框 , hover及其它效果有边框 , 可以加 type=“text” 属性
  • html button去掉点击时的边框

    万次阅读 2019-01-02 19:11:59
    button class="querybtn"&gt;确定&lt;/button&gt; .querybtn{ width: 100%; height: 40px; -webkit-border-radius:6px;/*适配以webkit为核心的浏览器(chrome、safari等)*/ -moz-border-...
  • 微信小程序 去除button边框

    千次阅读 2018-07-09 14:26:43
    传统的去除button边框的方法: border: none; 这个并不起什么作用, 需要用after选择器来处理: .shareBtn { display: flex; flex-direction: row; justify-content: center; align-items: center; ...
  • wpf button去掉虚边框

    热门讨论 2011-04-07 11:23:09
    wpf button去掉虚边框wpf button去掉虚边框wpf button去掉虚边框

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,055
精华内容 3,222
关键字:

去除button点击是的边框