Navicon Transformicons藍色邊框

Question

我正在玩sara soueidan navicon，分析後還是有些東西我完全不明白。

有一個藍色選擇器周圍那些圖標，我似乎無法刪除，具體到他的方法或簡單的jquery的誤解？

這裏是代碼http://jsfiddle.net/Ah6XA/

<button type="button" role="button" aria-label="Toggle Navigation" id="mbtn" class="lines-button x"> 
     <span class="lines"></span> 
    </button> 
#mbtn { 
     display: inline-block; 
     margin: 0 1em; 
     border: none; 
     background: none; 
    } 
    #mbtn span { 
     display: block; 
    } 

    .lines-button { 
     padding: 2rem 1rem; 
     transition: .3s; 
     cursor: pointer; 
     /* */ 
    } 

    .lines { 
     display: inline-block; 
     width: 4rem; 
     height: 0.57143rem; 
     background: #211f20; 
     border-radius: 0.28571rem; 
     transition: 0.3s; 
     position: relative; 
    } 
    .lines:before, .lines:after { 
     display: inline-block; 
     width: 4rem; 
     height: 0.57143rem; 
     background: #211f20; 
     border-radius: 0.28571rem; 
     transition: 0.3s; 
     position: absolute; 
     left: 0; 
     content: ''; 
     -webkit-transform-origin: 0.28571rem center; 
     transform-origin: 0.28571rem center; 
    } 
    .lines:before { 
     top: 1rem; 
    } 
    .lines:after { 
     top: -1rem; 
    } 

    .lines-button:hover .lines:before { 
     top: 1.14286rem; 
    } 
    .lines-button:hover .lines:after { 
     top: -1.14286rem; 
    } 

    .lines-button.close { 
     -webkit-transform: scale3d(0.8, 0.8, 0.8); 
     transform: scale3d(0.8, 0.8, 0.8); 
    } 

    .lines-button.x.close .lines { 
     background: transparent; 
    } 
    .lines-button.x.close .lines:before, .lines-button.x.close .lines:after { 
     -webkit-transform-origin: 50% 50%; 
     transform-origin: 50% 50%; 
     top: 0; 
     width: 4rem; 
    } 
    .lines-button.x.close .lines:before { 
     -webkit-transform: rotate3d(0, 0, 1, 45deg); 
     transform: rotate3d(0, 0, 1, 45deg); 
    } 
    .lines-button.x.close .lines:after { 
     -webkit-transform: rotate3d(0, 0, 1, -45deg); 
     transform: rotate3d(0, 0, 1, -45deg); 
    } 



var anchor = document.querySelectorAll('button'); 

[].forEach.call(anchor, function(anchor){ 
    var open = false; 
    anchor.onclick = function(event){ 
    event.preventDefault(); 
    if(!open){ 
     this.classList.add('close'); 
     open = true; 
    } 
    else{ 
     this.classList.remove('close'); 
     open = false; 
    } 
    } 
}); 

Answer 1

如果你想刪除手機上的邊界，你必須補充一點：

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);