樣式表單與CSS

學習改善您的網站外觀

學習如何使用CSS設計表單是改善網站外觀的好方法。 HTML表單可以說是大多數網頁上最醜陋的事情之一。 他們往往無聊和功利,並沒有提供很多風格的方式。

隨著CSS,可以改變。 將CSS與更高級的表單標籤相結合可以提供一些漂亮的表單。

更改顏色

就像文本一樣,您可以更改表單元素的前景和背景顏色。

幾乎所有表單元素的背景顏色都可以通過簡單的方式使用輸入標籤上的background-color屬性。 例如,此代碼在所有元素上應用藍色背景色(#9cf)。

輸入{
background-color:#9cf;
顏色:#000;
}

要僅更改某些表單元素的背景色,只需添加textarea並選擇樣式即可。 例如:

輸入,textarea,選擇{
background-color:#9cf;
顏色:#000;
}

如果您使背景顏色變暗,請務必更改文字顏色。 對比色有助於使表單元素更清晰。 例如,如果文本顏色是白色,則深紅色背景顏色的文本更容易閱讀。 例如,此代碼將白色文本放在紅色背景上。

輸入,textarea,選擇{
background-color:#c00;
顏色:#fff;
}

你甚至可以在窗體標籤上添加背景顏色。 請記住,表單標記是一個塊元素 ,所以顏色填充整個矩形,而不僅僅是元素的位置。

您可以為塊元素添加黃色背景以使區域突出,如下所示:

形式{
background-color:#ffc;
}

添加邊框

與顏色一樣,您可以更改各種表單元素的邊框。 您可以在整個表單中添加單個邊框。 一定要添加填充,否則您的表單元素將被堵塞在邊界旁邊。

下面是一個用5像素填充的1像素黑色邊框的代碼示例:

形式{
border:1px solid#000;
填充:5px;
}

你可以把邊界放在不僅僅是表單本身上。 更改輸入項目的邊框以使其突出顯示:

輸入{
邊框:2px虛線#c00;
}

當你在輸入框上放置邊框時要小心,因為它們看起來不像輸入框,有些人可能沒有意識到它們可以填寫表單。

組合樣式功能

通過將您的表單元素與想法和一些CSS放在一起,您可以設置一個漂亮的外觀來補充網站的設計和佈局。