文章

自訂表單樣式

發布於 更新於
作者 Ned Hsu 6 分鐘閱讀

自訂表單樣式

表單是用戶與網頁進行交互的主要方式之一。使用 CSS 來自訂表單樣式，可以改善用戶體驗，讓表單看起來更加美觀和專業。

1. 自訂輸入框樣式

可以使用 CSS 來自訂文本輸入框、密碼輸入框、電子郵件輸入框等元素的樣式。

範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 包括內距和邊框在內的總寬度 */
    font-size: 16px;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    border-color: #3498db;
    outline: none; /* 移除預設的聚焦樣式 */
}

這段 CSS 設置了輸入框的寬度、內距、邊框樣式和聚焦狀態時的效果。

2. 自訂按鈕樣式

表單中的按鈕樣式化也是很重要的部分，確保其視覺上吸引人並且與整個頁面風格一致。

範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

button,
input[type="submit"] {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button:hover,
input[type="submit"]:hover {
    background-color: #2ecc71;
}

這段樣式設置了按鈕的背景顏色、字體顏色、內距、邊框半徑以及滑鼠懸停時的效果。

3. 自訂選擇框（select）樣式

選擇框的樣式化通常比較困難，因為不同瀏覽器對其有不同的默認樣式。不過，可以用一些 CSS 技巧來改善其外觀。

範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    font-size: 16px;
    appearance: none; /* 移除默認樣式 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="0,0 20,0 10,10" fill="#333"/></svg>'); /* 自訂下拉箭頭 */
    background-repeat: no-repeat;
    background-position: right 10px center;
}

select:focus {
    border-color: #3498db;
    outline: none;
}

使用 appearance: none; 可以移除瀏覽器默認的選擇框樣式，然後自訂背景圖片來替換下拉箭頭圖標。

4. 自訂複選框和單選按鈕

複選框和單選按鈕的樣式化通常需要更多的技巧，可以隱藏原始元素，然後用偽元素來設計自訂樣式。

範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

/* 隱藏原始的複選框和單選按鈕 */
input[type="checkbox"],
input[type="radio"] {
    display: none;
}

/* 自訂複選框的外觀 */
.custom-checkbox {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #3498db;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

/* 自訂複選框被選中時的樣式 */
input[type="checkbox"]:checked + .custom-checkbox::before {
    content: '✔';
    position: absolute;
    top: 0;
    left: 2px;
    color: #2ecc71;
    font-size: 14px;
}

/* 自訂單選按鈕的外觀 */
.custom-radio {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #3498db;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

/* 自訂單選按鈕被選中時的樣式 */
input[type="radio"]:checked + .custom-radio::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    background-color: #2ecc71;
    border-radius: 50%;
}

HTML 構造：

1
2
3
4
5
6
7
8
9
10
11

<!-- 複選框 -->
<label>
    <input type="checkbox" name="option" value="1">
    <span class="custom-checkbox"></span> 選項 1
</label>

<!-- 單選按鈕 -->
<label>
    <input type="radio" name="choice" value="a">
    <span class="custom-radio"></span> 選項 A
</label>

這段範例將原始的複選框和單選按鈕隱藏，然後使用 span 元素和偽元素來創建自訂樣式。

5. 自訂表單的整體布局

通過使用 Flexbox 或 Grid 可以簡單地對表單進行布局，使其看起來更為整潔和結構化。

範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.form-container {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr); /* 兩列布局 */
}

.form-container label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-container input,
.form-container select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.form-container button {
    grid-column: span 2; /* 按鈕跨兩列 */
}

HTML 結構：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="form-container">
    <div>
        <label for="name">姓名</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="email">電子郵件</label>
        <input type="email" id="email" name="email">
    </div>
    <div>
        <label for="country">國家</label>
        <select id="country" name="country">
            <option value="taiwan">台灣</option>
            <option value="japan">日本</option>
            <option value="usa">美國</option>
        </select>
    </div>
    <div>
        <label for="message">留言</label>
        <textarea id="message" name="message" rows="4"></textarea>
    </div>
    <button type="submit">提交</button>
</div>

6. 小結

自訂表單樣式有助於改善用戶體驗，使表單更易於使用且與網站的整體設計相匹配。透過使用 CSS，可以改變輸入框、按鈕、選擇框、複選框和單選按鈕的外觀，以及調整表單的布局，使其更加現代和直觀。

Software, CSS
CSS
本文章以 CC BY 4.0 授權