在chrome瀏覽器中，防止input[text]和textarea在聚焦時(shí)出現(xiàn)黃色邊框的解決方法
更新時(shí)間：2011年05月24日 23:51:20 作者：
chrome瀏覽器不管對于開發(fā)者還是一般用戶都可以說是一個(gè)相當(dāng)優(yōu)秀的網(wǎng)頁瀏覽器，但是在開發(fā)中，讓人感覺很多余的一個(gè)特性就是，在表單項(xiàng)中的控件聚焦時(shí)總會出現(xiàn)一個(gè)黃色邊框
特別是input[text]和textarea，并且在textarea右下角還有一個(gè)可用鼠標(biāo)拖動該表textarea大小的功能，如下圖所示：
input,button,select,textarea{outline:none}
取消textarea的拖動改變大小的功能：
textarea{resize:none}
合并之后：
input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}
input[text]：
textarea：
有的時(shí)候黃色邊框很影響頁面效果，并且textarea拖動改變大小之后直接影響布局，所以為了不使這些多余的功能和效果影響頁面，可以使用一下幾句CSS清除掉chrome瀏覽器的默認(rèn)效果，代碼如下：
取消表單項(xiàng)聚焦時(shí)產(chǎn)生的黃色邊框：
復(fù)制代碼 代碼如下:
input,button,select,textarea{outline:none}
取消textarea的拖動改變大小的功能：
復(fù)制代碼 代碼如下:
textarea{resize:none}
合并之后：
復(fù)制代碼 代碼如下:
input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}
您可能感興趣的文章:
- 讓textarea自動調(diào)整大小的js代碼
- javascript textarea光標(biāo)定位方法(兼容IE和FF)
- 動態(tài)調(diào)整textarea中字體的大小代碼
- 新浪微博字?jǐn)?shù)統(tǒng)計(jì) textarea字?jǐn)?shù)統(tǒng)計(jì)實(shí)現(xiàn)代碼
- Textarea與懶惰渲染實(shí)現(xiàn)代碼
- 非主流的textarea自增長實(shí)現(xiàn)js代碼
- js操作textarea方法集合封裝(兼容IE,firefox)
- JavaScript 獲取/設(shè)置光標(biāo)位置,兼容Input&&TextArea
- js TextArea的選中區(qū)域處理
- js封裝的textarea操作方法集合(兼容很好)
- javascript實(shí)現(xiàn)的textarea運(yùn)行框效果代碼 不用指定id批量指定
- JavaScript 監(jiān)聽textarea中按鍵事件
- javascript之textarea打字機(jī)效果提示代碼推薦
- 用javascript獲取textarea中的光標(biāo)位置
- textarea支持圖形編輯的實(shí)現(xiàn)方法
- 在textarea文本域中顯示HTML代碼的方法
- 關(guān)于textarea的直觀換行的一些研究材料
- JS TextArea字符串長度限制代碼集合
相關(guān)文章
這篇文章主要為大家介紹了開箱即用的開源工具庫xijs示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
使用純JS實(shí)現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)
最近做了一個(gè)用js實(shí)現(xiàn)鼠標(biāo)拖拽多選的功能,于是整理了一下思路,寫了一個(gè)小demo,下面這篇文章主要給大家介紹了關(guān)于如何使用純JS實(shí)現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要給大家介紹了關(guān)于用JS獲取Headers頭部信息的相關(guān)資料,頭部信息是在JavaScript中進(jìn)行網(wǎng)絡(luò)請求時(shí)常用的操作,Headers 頭部信息包含了請求或響應(yīng)的元數(shù)據(jù),需要的朋友可以參考下2023-09-09
JavaScript Event學(xué)習(xí)第十章 一些可替換的事件對
為了讓我們的JavaScript驅(qū)動的頁面對那些不能或者不想使用鼠標(biāo)的用戶也能很好的使用，我們對于像mouseover和click這樣的事件做一些處理，同樣的，對于非鼠標(biāo)事件也同樣的要我們的腳本執(zhí)行。2010-02-02
這篇文章主要為大家介紹了合并多個(gè)ArrayBuffer方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
創(chuàng)建一個(gè)復(fù)制UBB軟件信息的鏈接或按鈕的js代碼
2008-01-01
JS實(shí)現(xiàn)仿中關(guān)村論壇評分后彈出提示效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)仿中關(guān)村論壇評分后彈出提示效果的方法,實(shí)例分析了javascript彈出特效的css與提示框的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
HTML5 canvas 9繪制圖片2016-09-09
JavaScript實(shí)現(xiàn)設(shè)計(jì)模式中的單例模式的一些技巧總結(jié)
單例模式是JavaScript項(xiàng)目中最常用的設(shè)計(jì)模式之一,下面羅列了JavaScript實(shí)現(xiàn)設(shè)計(jì)模式中的單例模式的一些技巧總結(jié),包括惰性加載與分支技術(shù)等,需要的朋友可以參考下.2016-05-05
詳解uniapp分包的實(shí)現(xiàn)方式及優(yōu)點(diǎn)
當(dāng)今移動應(yīng)用開發(fā)領(lǐng)域,隨著用戶對于應(yīng)用功能和體驗(yàn)的要求不斷提高,應(yīng)用程序的復(fù)雜度也在不斷增加,在這種情況下,應(yīng)用程序的體積也隨之增大,為了解決這個(gè)問題,Uniapp提供了分包功能,本文將詳細(xì)介紹Uniapp分包的功能和優(yōu)勢,包括如何通過配置文件實(shí)現(xiàn)分包2023-09-09