input文字框獲取焦點伸縮效果
分享一段程式碼例項,它實現了文字框獲取焦點之後,文字框能夠伸長。
失去焦點又會恢復到原來的尺寸,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> input { width: 100px; height: 20px; transition: width .5s; } input:focus { width: 200px; } </style> </head> <body> <input type="text"> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).transition可以參閱CSS3 transition一章節。
(2).:focus可以參閱CSS :focus一章節。
相關文章
- jQuery文字框獲取焦點和失去焦點jQuery
- 點選獲取焦點可以伸縮的搜尋框程式碼例項
- 純css設定input文字框獲取焦點時的樣式CSS
- jQuery實現文字框獲取焦點jQuery
- input文字框焦點背景變色
- js讓文字框獲取焦點程式碼JS
- 文字框獲取焦點設定樣式
- jquery註冊文字框獲取焦點清空,失去焦點賦值jQuery賦值
- JavaScript文字框獲取焦點彈出tipsJavaScript
- vue中文字框自動獲取焦點Vue
- JavaScript獲取input text文字框JavaScript
- 如何使用angularjs實現文字框獲取焦點AngularJS
- 去掉antd的Input元件獲取焦點時的藍色邊框元件
- fixed定位和input獲取焦點影響鍵盤彈出效果
- 文字框獲取或者失去焦點改變樣式屬性
- javascript文字框獲取焦點設定其樣式程式碼JavaScript
- javascript當文字框獲得焦點設定邊框JavaScript
- 去掉input標籤獲得焦點後的邊框
- javascript input文字框新增提示文字效果JavaScript
- css 文字框focus獲取焦點設定樣式程式碼例項CSS
- CSS實現的文字框獲取焦點設定樣式程式碼CSS
- 設定input文字框只讀效果
- 文字框獲得和失去焦點程式碼例項
- 獲得焦點時候設定文字框的樣式
- JQuery設定文字框和密碼框獲得焦點時樣式jQuery密碼
- ueditor文字框初始化如何顯示預設內容,以及文字框獲取焦點後清空預設內容
- 純css實現控制文字框獲得焦點的樣式CSS
- css input文字框中的內容居中效果CSS
- input文字框圓角效果程式碼例項
- 點選擴充套件或縮小文字框效果程式碼套件
- jQuery 伸縮搜尋框jQuery
- 設定文字框得到焦點或者失去焦點時的樣式
- 預設讓表單第一個input文字框獲取游標
- 獲取input框輸入值異常
- 點選文字框實現文字框內容選中效果
- 獲取文字框中焦點的位置 相容IE,FireFoxFirefox
- 去掉chrome瀏覽器中input獲得焦點時的帶顏色邊框呢Chrome瀏覽器
- 動態新增或減少文字框,並獲取文字框值