用 CSS 移除點擊 button 出現的藍色外框線(input也適用)

   635 VIEWS
用 CSS 移除藍色外框線(button、input等外框)

當使用者在 Chorme 瀏覽器上點擊 button 或 input 時就會看到外框線(根據不同網站顏色可能不同,但預設是藍色),有時會失去美感,由於這是輪廓而非邊線因此無法用 border:none; 來移除,如果想移除這個外框線,只需要在 CSS 中加上 outline:none; 即可。

outline:none;
完整範例:
<style type="text/css">
/* 消除 button 的外框線 */
button {
	outline:none;
}
/* 消除 input 的外框線 */
input {
	outline:none;
}
</style>
Button 範例(請使用 Chrome 瀏覽器):

Input 範例(請使用 Chrome 瀏覽器):



時雨 時雨,時雨の町-日文學習園地站長,為了記錄網站維護的日誌而架設本網站,並以家中黑貓命名為黑貓城,順道分享各種架站相關知識與網頁程式語言。也歡迎各位到我的日語教學網站學習日文 :)

LEAVE A REPLY

COMMENTS