CSS3的出現為表單設計提供了更多的可能性,現在可以使用CSS3的一些新特性來設計更加炫酷和個性化的表單。
/*樣式代碼*/ input[type="text"] { border: none; border-bottom: 2px solid #ccc; background: transparent; outline: none; padding: 7px; width: 100%; font-size: 18px; } input[type="submit"] { padding: 5px 30px; font-size: 18px; background-color: #f47c20; color: #fff; border: none; border-radius: 5px; cursor: pointer; }
在上面的樣式代碼中,我們給input標簽設置了幾個比較有意思的屬性。
首先,在input[type="text"]中,我們去掉了邊框,使用了下劃線的形式來代替邊框,使用了背景透明,看起來非常簡潔。同時我們還去掉了input聚焦時的outline,讓輸入框更加美觀。
另外,我們還為input[type="submit"]添加了一些hover和active的樣式,讓按鈕在鼠標滑過和點擊時展現出不同的效果。比如在hover時我們可以將背景色變為更亮的顏色,讓用戶有更好的視覺反饋。
通過利用CSS3的新特性,我們可以輕松地實現更加美觀和個性化的表單。嘗試使用不同的樣式來打造出符合自己風格的表單吧!