表單界面是網站或應用程序中重要的部分之一,它允許用戶輸入和提交數據。而CSS作為前端開發中的一項技術,可以改善表單界面的外觀和交互效果。下面將會介紹表單界面的CSS源碼。
/* 添加表單框樣式 */ input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } /* 添加按鍵樣式 */ 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; }
以上源碼使用了、
在添加了輸入框樣式之后,CSS代碼可以為提交按鈕添加樣式,以便用戶能夠知道它們要點擊的是何種類型的內容和按鍵。
添加完樣式之后,用戶將會看到具有美麗效果的表單,它們的界面將會更加吸引人。同時,為了更好地滿足用戶的需求,我們還可以在代碼中添加其他樣式,例如給文本框添加恰當的提示等等。