css設定input文字框樣式
使用css設定input元素的樣式是最為常用的操作之一,當然也是最為基礎的操作,可能對於剛剛接觸css的朋友還不夠熟悉,下面就通過一段簡單的程式碼歷史演示一下如何設定文字框的樣式,當然這個演示可能並不是特別的美觀,這裡的目的也只是起到一個演示作用,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .txt{ width:200px; height:18px; border-top:1px solid green; border-left:1px solid green; background-color:#CCC; color:blue; } </style> </head> <body> <input type="text" class="txt" value="螞蟻部落歡迎您" /> </body> </html>
以上程式碼對文字框進行了設定,下面介紹一下設定專案:
(1).使用width可以設定文字框的寬度。
(2).使用height可以設定文字框的高度。
(3).border-top和border-left可以設定文字框的頂部或者左部的邊框樣式。
(4).background-color設定文字框的背景顏色。
(5).color設定文字框中文字的內容。
相關文章
- CSS 設定input文字框樣式CSS
- CSS input文字框樣式CSS
- CSS input 文字框樣式CSS
- 單獨設定input text文字框樣式
- 純css設定input文字框獲取焦點時的樣式CSS
- 設定input type為text的文字框樣式
- css設定具有指定type屬性值的input文字框的樣式CSS
- CSS 設定文字樣式CSS
- JavaScript設定input文字框只讀JavaScript
- 設定input文字框只讀效果
- CSS匹配input text文字框CSS
- CSS 設定placeholder文字樣式CSS
- 文字框獲取焦點設定樣式
- 為input文字框設定背景圖片
- CSS設定半個文字的樣式CSS
- css 文字框focus獲取焦點設定樣式程式碼例項CSS
- CSS實現的文字框獲取焦點設定樣式程式碼CSS
- JavaScript 動態設定input文字框只讀JavaScript
- javascript動態設定input文字框的值JavaScript
- css設定type為text的input元素的樣式CSS
- 如何使用CSS設定文字框的邊框CSS
- CSS設定元素邊框樣式例項程式碼CSS
- JQuery設定文字框和密碼框獲得焦點時樣式jQuery密碼
- 獲得焦點時候設定文字框的樣式
- CSS 設定文字框游標顏色CSS
- HTML中設定input等文字框為不可操作HTML
- CSS 設定元素第一行文字樣式CSS
- javascript文字框獲取焦點設定其樣式程式碼JavaScript
- css input文字框中的內容居中效果CSS
- js動態設定input文字框的readonly屬性JS
- CSS 設定 <progress>樣式CSS
- CSS 設定列表樣式CSS
- 設定文字框得到焦點或者失去焦點時的樣式
- CSS系列:CSS文字樣式CSS
- 常用CSS樣式1:文字樣式CSS
- 13種常用按鈕、文字框、表單等CSS樣式CSS
- CSS_邊框樣式CSS
- Css基本樣式————文字CSS