CSS是一種強大的樣式表語言,它可以使HTML文本具有更靈活、更美觀的外觀和排版。 在許多網站中,表單是最重要的交互元素之一。 因此,我們需要設計一個漂亮的表單來改善用戶體驗。 以下是在CSS中樣式化表單的技巧。
/* 設置表單輸入元素的整體樣式 */ form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="password"], form textarea { padding: 10px; border-radius: 5px; border: none; background-color: #f6f6f6; box-shadow: 0 0 5px #ccc; font-size: 16px; } /* 設置輸入元素在輸入狀態下的樣式 */ form input[type="text"]:focus, form input[type="email"]:focus, form input[type="tel"]:focus, form input[type="password"]:focus, form textarea:focus { outline: none; box-shadow: 0 0 5px #00aeff; } /* 設置按鈕樣式 */ form input[type="submit"] { background-color: #00aeff; border: none; color: #fff; padding: 10px 20px; border-radius: 5px; box-shadow: 0 0 5px #ccc; cursor: pointer; } form input[type="submit"]:hover { background-color: #0077ff; } /* 設置表單標簽的樣式 */ form label { display: block; margin-bottom: 10px; font-size: 16px; color: #333; }
以上代碼演示了如何設置表單輸入元素、按鈕和標簽的樣式。 通過使用CSS,我們可以自由地設置每個表單元素的背景色、字體大小和顏色、邊框、陰影和圓角等屬性。 這將使表單看起來更加現代和專業,并使用戶更容易使用。
上一篇css把圖片往右移