在chrome瀏覽器中，防止input[text]和textarea在聚焦時(shí)出現(xiàn)黃色邊框的解決方法
更新時(shí)間：2011年05月24日 23:51:20 作者：
chrome瀏覽器不管對(duì)于開發(fā)者還是一般用戶都可以說是一個(gè)相當(dāng)優(yōu)秀的網(wǎng)頁瀏覽器，但是在開發(fā)中，讓人感覺很多余的一個(gè)特性就是，在表單項(xiàng)中的控件聚焦時(shí)總會(huì)出現(xiàn)一個(gè)黃色邊框
特別是input[text]和textarea，并且在textarea右下角還有一個(gè)可用鼠標(biāo)拖動(dòng)該表textarea大小的功能，如下圖所示：
input,button,select,textarea{outline:none}
取消textarea的拖動(dòng)改變大小的功能：
textarea{resize:none}
合并之后：
input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}
input[text]：
textarea：
有的時(shí)候黃色邊框很影響頁面效果，并且textarea拖動(dòng)改變大小之后直接影響布局，所以為了不使這些多余的功能和效果影響頁面，可以使用一下幾句CSS清除掉chrome瀏覽器的默認(rèn)效果，代碼如下：
取消表單項(xiàng)聚焦時(shí)產(chǎn)生的黃色邊框：
復(fù)制代碼 代碼如下:
input,button,select,textarea{outline:none}
取消textarea的拖動(dòng)改變大小的功能：
復(fù)制代碼 代碼如下:
textarea{resize:none}
合并之后：
復(fù)制代碼 代碼如下:
input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}
您可能感興趣的文章:
- 讓textarea自動(dòng)調(diào)整大小的js代碼
- javascript textarea光標(biāo)定位方法(兼容IE和FF)
- 動(dòng)態(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自增長(zhǎng)實(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字符串長(zhǎng)度限制代碼集合
相關(guān)文章
前端uniapp封裝網(wǎng)絡(luò)請(qǐng)求以及實(shí)際應(yīng)用教程
這篇文章主要給大家介紹了關(guān)于前端uniapp封裝網(wǎng)絡(luò)請(qǐng)求以及實(shí)際應(yīng)用的相關(guān)資料,在uniapp中進(jìn)行網(wǎng)絡(luò)測(cè)試請(qǐng)求可以通過封裝網(wǎng)絡(luò)請(qǐng)求來實(shí)現(xiàn),文中給出了詳細(xì)的代碼實(shí)例,需要的朋友可以參考下2024-01-01
根據(jù)iframe中src屬性是同域鏈接還是跨域鏈接，通信方式也不同,下面有個(gè)不錯(cuò)的示例，需要的朋友可以參考下2014-05-05
JS實(shí)現(xiàn)的base64加密解密操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)的base64加密解密操作,結(jié)合實(shí)例形式分析了基于javascript的base64加密與解密函數(shù)定義與使用相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
重復(fù)提交、重復(fù)刷新、防止后退等等都是屬于系統(tǒng)為避免重復(fù)記錄而需要解決的問題，在客戶端去處理需要針對(duì)每一種的可能提出相應(yīng)的解決方案，然而在服務(wù)器端看來只不過是對(duì)于數(shù)據(jù)真實(shí)性的檢驗(yàn)問題2012-09-09
easyui combogrid實(shí)現(xiàn)本地模糊搜索過濾多列
本篇文章主要介紹了easyui combogrid實(shí)現(xiàn)本地模糊搜索過濾多列，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
服務(wù)器端js（Server-Side Javascrpt）很早也就有了，JAVA中也有javascript 的script引擎。2010-12-12
javascript while語句和do while語句的區(qū)別分析
這篇文章通過實(shí)例代碼較詳細(xì)的給大家介紹了javascript while語句和do while語句的區(qū)別，感興趣的朋友一起看看吧2007-12-12
js老生常談之this,constructor ,prototype全面解析
下面小編就為大家?guī)硪黄猨s老生常談之this,constructor ,prototype。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-04-04
這篇文章主要介紹了淺析BootStrap柵格系統(tǒng)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
Quasar Input:type="number" 去掉上下小箭頭 實(shí)現(xiàn)加減按鈕樣式功能
這篇文章主要介紹了Quasar Input:type="number" 去掉上下小箭頭 實(shí)現(xiàn)加減按鈕樣式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04