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

2020-12-14 07:58:07 29 VIEWS

當使用者在 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 瀏覽器）：

時雨，時雨の町-日文學習園地站長，為了紀錄網站維護的日誌而架設本網站，並以家中黑貓命名為黑貓城，順道分享各種架站知識與相關的網頁程式語言，如果你喜歡我的文章，請幫我按讚哦(*´ω｀*)。也歡迎各位到我的日語教學網站學習日文 :)

COMMENTS

LEAVE A REPLY