在網站開發中,用戶留言表單是非常重要的一部分。我們需要設置好表單的樣式,讓用戶能夠清晰地填寫信息。在這篇文章中,我們將介紹如何使用CSS樣式來美化表單。
form { padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #f4f4f4; margin: 20px auto; max-width: 600px; } input[type="text"], textarea { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: white; resize: none; } input[type="submit"] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type="submit"]:hover { background-color: #45a049; }
以上代碼中,我們對form表單設置了一些基本樣式。我們通過設置padding來增加表單的上下左右的間距。border和border-radius分別為表單設置了邊框和邊框的圓角。我們還為表單設置了背景顏色和外邊距。設置max-width會根據屏幕寬度自動調整表單的寬度。
接下來,我們為input和textarea元素設置了基本樣式。它們的寬度都是100%。我們通過padding和margin增加了元素的內部和外部間距。我們為這些元素設置了2像素的邊框,并設置了border-radius來實現圓角效果。除此之外,我們還為textarea元素設置了resize:none屬性。這將禁用大小調整功能,從而保證文本框的大小不會改變。
之后,我們為submit類型的按鈕添加了樣式。我們為按鈕設置了背景顏色、文字顏色、內部和外部間距等樣式。當鼠標懸停在按鈕上時,我們還增加了一個hover樣式,使按鈕的背景顏色變暗。
這就是一些基本的CSS樣式,您可以根據需要進行自定義修改,以滿足不同的表單設計需求。
上一篇css樣式用分號隔開嗎
下一篇css樣式畫圓