button在點選時出現邊框
https://blog.csdn.net/qq_26943485/article/details/54288255
問題描述:
在自己做東西時遇見了這麼個問題,button在chrome瀏覽器下被點選時會出現一個橙色的邊框
即使當時在button上新增 :focus{outline:none;}也無法解決問題,很急。
解決辦法:在button上新增 :focus{outline:0;} 才得以解決。
思考來源:
轉自:http://blog.csdn.net/qq_26222859/article/details/51516011
*************************************************************************************************************************************
css控制Button 按鈕的點選時候出現藍色邊框 – 北漂小兄弟
http://www.inbeijing.org/archives/1139
Button 按鈕在點選時候出現藍色邊框的問題
新增css屬性,這樣在點選按鈕的時候就不會有藍色邊框了。
//最常用的方法
button{
outline:none;
}
谷歌瀏覽器中button按鈕的邊框如何去除 - HTML/CSS
http://www.myexception.cn/HTML-CSS/1643495.html
谷歌瀏覽器中button按鈕的邊框怎麼去除
在谷歌瀏覽器中點選一個button按鈕,總是會出現一個邊框,請教怎麼才能去除這個邊框
------解決方案--------------------
設定這個就看不到那個框了
//谷歌瀏覽器需要單獨對待
:focus{
outline: 0;
}
outline的使用,大家都喜歡在reset樣式表中直接重置:
* {
outline: none;
}
Eric Meyers在他的CSS Reset是這樣重置的:
/* remember to define focus styles! */
:focus {
outline: 0;
}
這些方法大家都可以說常見了。可是有一點可能大家還是不太清楚——outline在表單的button中使用時,在firefox瀏覽器下依然還是會有虛線框顯示的。正好今天有一位朋友也問起這個問題,於是查了一下相關資料,才得知在Firefox下是需要使用別的方法來處理的。那麼今天這個教程就簡單的來了解如何處理這個問題。
問題描述:
前面也說了,很多設計師喜歡使用:
*{outline:none;}
或者
:focus {outline:none;}
來解決焦點粗虛線框的問題。但是你有沒有注意到,使用這種方法,對於button在Firefox下還是會有虛線框的,如下圖所示:
//其實到這裡了,關於火狐下依舊出現虛線框的問題,樓主我有單獨做個demo來驗證,然後並沒發現原作者說的那樣的情況,也許是我做錯了吧關於以下的方式,我覺得能用很簡單的方法解決就儘量採用最簡單的,當然是在保證效能的情況下
解決方法:
解決這個bug我們需要使用Mozilla的一個私有屬性:-moz-focuse-inner。不過這裡有一點大家需要特別的注意:通過“-moz-focus-inner”並不是重置“outline”這個屬性的值,而是需要通過他來改變buttons的“border”樣式,具體的請看下面的程式碼:
input::-moz-focus-inner,
button::-moz-focus-inner {
border: 0;
}
上面寫是包括了所有的input,但有時我們並不想這個值對“input[type=text]”有影響,那麼我樣其實可以這樣來設定:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
通過上面的程式碼,那個難看的虛線框,我們就可以順利的移除這樣一來,我們其實對於button的outline設定需要這樣來設定,才能達到所有瀏覽器一樣的風格效果:
:focus {outline:none;} /*for IE*/
::-moz-focus-inner {border-color: transparent;} /*for mozilla*/
這樣表單button得到焦點,在各瀏覽器下的渲染效果就一致了。
上面是去除outline的邊框效果的寫法,但那樣或許不太好理解,那麼你也可以像設定正常樣式那來理解,如下面的程式碼所示:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 1px dotted transparent;
}
button:focus::-moz-focus-inner,
input[type="reset"]:focus::-moz-focus-inner,
input[type="button"]:focus::-moz-focus-inner,
input[type="submit"]:focus::-moz-focus-inner,
input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
padding: 3px;
border-color: #F3F3F3;
}
上面的使用可算是一個小技巧吧,可能知道的人也蠻多的,我也就不在多說這樣的問題,因為要我來說是怎麼一回事,我也實在沒有那樣的水平來說清楚,但我只知道這樣的方法能解決問題
**********************************************************************************************************************************************************************************************
不過在這裡也分析一下outline:none;與outline:0;的區別
- when the outline is 0 , the outline-width is 0px
- when the outline is none , the outline-width is medium
反正以後 一般情況下都還是寫outline:0吧
當然如果需要某些動畫效果可以單獨設定邊框
var btn =document.getElementById("bnt1") ; btn.style.border="1px solid #FF9933" ;