ボタンの周りの青色のハイライト

私は自分のボタンにCSS3を使用しています。いずれかのボタンをクリックするたびに、ボタンの周りに長方形の青色のハイライトが表示されることに気付きました。私はそれを取り除く方法があるかどうかはわかりません。ここに私のコードは次のとおりです。ボタンは既にこのの世話をする必要があるプロパティoutline: 0;を持ってボタンの周りの青色のハイライト

.navbar-custom { 
     background-color:#000000; 
     color:#ffffff; 
     border-radius:0; 
     height:100px; 
     } 

.btn { 
    box-sizing: border-box; 
    appearance: none; 
    background-color: transparent; 
    border: 2px solid #e74c3c; 
    border-radius: 0.6em; 
    color: #e74c3c; 
    cursor: pointer; 
    display: flex; 
    align-self: center; 
    font-size: 1rem; 
    font-weight: 400; 
    line-height: 1; 
    margin: 20px; 
    padding: 1.2em 2.8em; 
    text-decoration: none; 
    text-align: center; 
    text-transform: uppercase; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700; 
} 
.btn:hover, .btn:focus { 
    color: #fff; 
    outline: 0; 
} 
.sixth { 
    border-radius: 3em; 
    border-color: #ec6800; 
    color: #FFF; 
    background-image: linear-gradient(to bottom, transparent 50%, #2ecc71 50%); 
    background-position: 0 0; 
    background-size: 200%; 
    transition: background 150ms ease-in-out, color 150ms ease-in-out; 
} 

</style> 

</head> 

<body> 

    <nav class="navbar navbar-custom"> 
     <ul class="nav navbar-nav navbar-right"> 
      <button class="btn sixth">SIGN UP</button> 
       </ul> </nav>   
</body>

出典

2017-10-01 Anonymous

いくつかのケースで役立ちますあなたが行く：https://stackoverflow.com/a/25298082/2936363 [ChromeでCSSのカスタムスタイルのボタンから青色の境界線を削除]の – Selrond

可能な複製（https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome） –

、hereを参照し、両者が基本的に同じことを行う、あなたはoutline:noneやoutline:0のいずれかを使用して、このプロパティをオーバーライドするいくつかのCSSがなければなりませんにプロパティを変更してください。

前：

.btn:hover, .btn:focus { 
    color: #fff; 
    outline: 0; 
}

後：

.btn:focus { 
    color: #fff; 
    outline: 0 !important; 
}

.navbar-custom { 
 
    background-color: #000000; 
 
    color: #ffffff; 
 
    border-radius: 0; 
 
    height: 100px; 
 
} 
 

 
.btn { 
 
    box-sizing: border-box; 
 
    appearance: none; 
 
    background-color: transparent; 
 
    border: 2px solid #e74c3c; 
 
    border-radius: 0.6em; 
 
    color: #e74c3c; 
 
    cursor: pointer; 
 
    display: flex; 
 
    align-self: center; 
 
    font-size: 1rem; 
 
    font-weight: 400; 
 
    line-height: 1; 
 
    margin: 20px; 
 
    padding: 1.2em 2.8em; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-weight: 700; 
 
} 
 

 
.btn:hover, 
 
.btn:focus { 
 
    color: #fff; 
 
    outline: none !important; 
 
} 
 

 
.sixth { 
 
    border-radius: 3em; 
 
    border-color: #ec6800; 
 
    color: #FFF; 
 
    background-image: linear-gradient(to bottom, transparent 50%, #2ecc71 50%); 
 
    background-position: 0 0; 
 
    background-size: 200%; 
 
    transition: background 150ms ease-in-out, color 150ms ease-in-out; 
 
}

<nav class="navbar navbar-custom"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
    <button class="btn sixth">SIGN UP</button> 
 
    </ul> 
 
</nav>

出典

2017-10-01 09:48:17

仲間を助けてくれてありがとう –

@Joshあなたは大歓迎です:) –

ボックス、影があり

.btn:focus,.btn:active { 
    outline: none !important; 
    box-shadow: none !important; 
}

出典

2018-01-03 11:51:59 Thyagu

ボタンの周りの青色のハイライト

答えて

関連する問題