CSS input文字框樣式

admin發表於2018-12-11
CSS

文字框是最為常用的表單元素，可以使用CSS將其修飾的更為美觀。

大致可以從如下幾個方面進行設定：

（1）.邊框。

（2）.背景顏色。

（3）.字型顏色。

（4）.設定游標顏色。

（5）.獲取焦點。

下面將通過程式碼進行一下進行一下介紹，最後給出一個完整的程式碼例項。

為了節省篇幅，後面的程式碼大多使用程式碼片段，而不是完整程式碼。

一.設定邊框樣式：

[CSS] 純文字檢視 複製程式碼
input{border:1px solid blue;}

通過border屬性設定input文字的樣式。

更多邊框樣式方面內容參閱CSS border邊框一章節。

二.設定背景顏色：

[CSS] 純文字檢視 複製程式碼
input{
  border:1px solid blue;
  background-color:#ccc;
}

通過background-color屬性可以設定文字框字型顏色。

背景更多內容參閱CSS background 背景一章節。

三.設定字型顏色：

[CSS] 純文字檢視 複製程式碼
input{
  border:1px solid blue;
  background-color:#ccc;
  color:red;
}

通過color屬性即可實現設定文字字型顏色即可。

四.設定游標顏色：

本文對設定游標顏色不做介紹。

具體參閱CSS 設定文字框游標顏色一章節。

五.獲取焦點：

[CSS] 純文字檢視 複製程式碼
input{
  border:1px solid blue;
  background-color:#ccc;
  color:red;
}
input:focus{
  color:green;
}

通過:foucs選擇器可以設定文字框獲取焦點時的樣式。

:foucs更多內容參閱CSS E:focus 選擇器一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
input{
  border: 1px solid #ccc;
  padding: 7px 0px;
  border-radius: 3px;
  padding-left:5px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s             
}             
input:focus{
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)             
}    
</style>    
</head>
<body>
  <input id="text"/>
</body>
</html>

上面程式碼還應用幾個CSS3的屬性，具體參閱如下幾篇文章：

（1）.border-radius參閱CSS3 border-radius一章節。

（2）.box-shadow參閱CSS3 box-shadow一章節。

（3）.transition參閱CSS3 transition一章節。

相關文章