39.css3----button按鈕點擊時出現藍色邊框


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下還是會有虛線框的,如下圖所示:


解決方法:

解決這個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;

}

復制字體的背景顏色

 

::selection {
background: red;
 color: #fff;

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM