表單是網頁中非常常見的元素,很多時候我們都需要使用 CSS 來美化它。在這里,我們提供一組樣式表,可以讓您快速創建一個美觀的表單。
/* 表單樣式 */ form { display: flex; flex-direction: column; max-width: 600px; margin: 0 auto; } label, input, textarea { display: block; } label { margin-bottom: 10px; } input[type="text"], input[type="email"], input[type="password"], textarea { border: none; border-radius: 5px; padding: 10px; margin-bottom: 20px; font-size: 16px; background-color: #f4f4f4; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus { outline: none; border: 1px solid #3498db; background-color: #fff; } button[type="submit"] { background-color: #3498db; border: none; color: #fff; border-radius: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; } button[type="submit"]:hover { background-color: #2980b9; }
上面的代碼使用了 Flexbox 布局,通過添加一些必要的樣式,可以讓表單在桌面和移動設備上都表現良好。這個樣式表還添加了一些額外的樣式,包括輸入框獲取焦點時的樣式、提交按鈕的樣式等等。
下一篇cdn方式vue