美化表單的CSS高級技巧

ç¼ç¨è¯è¨ CSS HTML JavaScript XML å¥è·ä¸çèç 奔跑中的蝸牛 2017-11-11

學習一些新的和舊的選擇器，你可以根據需求、有效性和更多的方式來美化表單。

表單一直以來對於CSSer來說都是一件不易的事情，很難用CSS處理好表單要樣式。但是有一些很少使用的選擇器，卻賦予我們不一樣的能力，可以讓我們很好的控制 input 元素和其周邊元素的樣式，而且是根據功能來調整不同的樣式，這些往往都是通過JavaScript輔助完成的。而這些選擇器中有一些是較新的，而另一些是老的選擇器，只不過沒有過多的被重視，甚至沒什麼人使用。以至於這麼強大的功能就這樣被忽視。

先來看一個示例：

:placeholder-shown

美化表單的CSS高級技巧

第一個要介紹的選擇器相對較新的，還沒有完全得到瀏覽器的支持。然而，這似乎可以輕鬆地作為一個漸進的增強工作。選擇器允許我們檢測用戶當前是否可見佔位符。如果我們想動態的隱藏和顯示 input 對應的 label ，這將非常方便。

在這裡推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都歡迎，不定期分享乾貨，包括我自己整理的一份前端資料和零基礎入門教程，歡迎初學者和在進階中的小夥伴。

在這裡，用戶在 input 輸入之前， label 是被隱藏的，而當 input 在輸入時， placeholder 被隱藏， label 可見。另外在 label 上使用了 transition ，讓效果變得更美。請注意，對於這個效果， label 必須放在 input 標籤之後。

<!-- HTML --><div class="form-group"><input type="text" id="dynamic-label-input" placeholder="Enter some text"><label for="dynamic-label-input">Enter some text</label></div>/* CSS */.form-group {position: relative;padding-top: 1.5rem;}label {position: absolute;top: 0;font-size: var(--font-size-small);opacity: 1;transform: translateY(0);transition: all 0.2s ease-out;}input:placeholder-shown + label {opacity: 0;transform: translateY(1rem);}

:required

美化表單的CSS高級技巧

使用此選擇器表示 input 具有 required 屬性。這裡我還用了一個空的 span 標籤，並且給這個標籤定義了一個 .help-text 類名。使用 ::before 偽元素動態的添加一些內容。如果 input 沒有輸入任何內容，提交表單時，這個 .help-text 的 ::before 就會有內容顯示出來。實際上，這是用JavaScript來完成的，但是這裡我僅使用了CSS方法就實現了這個效果：

<!-- HTML --><label for="required-input">Required input</label><input type="text" id="required-input" required><span class="help-text"></span>/* CSS */input:required + .help-text::before {content: '*Required';}

:optional

美化表單的CSS高級技巧

這個選擇器執行和 :required 相反的操作。我再次使用了一個 .help-text 的 span 標籤。如果所需的屬性不存在，可顯示一些文本。

input:optional + .help-text::before { content: '*Optional';}

:disabled

美化表單的CSS高級技巧

這個對於大多數人來說應該很熟悉，但仍然要記住。 input 是否對用戶禁止輸入是非常重要的：

&:disabled { border-color: var(--gray-lighter); background-color: var(--gray-lightest); color: var(--gray-light);}

:read-only

美化表單的CSS高級技巧

與 disabled 的 input 相比， readonly 的 input 傳達的含義應該稍有不同。幸運的是，我們有這個選擇器來幫助我們做樣式上的區別。

<!-- HTML --><input type="text" value="Read-only value" readonly>/* CSS */input:read-only {border-color: var(--gray-lighter);color: var(--gray);cursor: not-allowed;}

:valid

美化表單的CSS高級技巧

雖然很多表單的驗證都是使用JavaScript來完成，但是我們可以利用HTML5表單驗證]。這個選擇器使我們有機會對當前具有本地瀏覽器驗證規則的任何 input 進行樣式美化。

如果 input 輸入的 value 是符合要求的，也就是說有效的。在這裡，我使用一個 svg ，通過 background-image 屬性來設置 input 有效的樣式， input 有一個 √ 在右側顯示：

input:valid {border-color: var(--color-primary);background-image: url("data:image/svg+xml,%3Csvg width='45px' height='34px' viewBox='0 0 45 34' version='1.1' xmlns='//www.w3.org/2000/svg' xmlns:xlink='//www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-56.000000, -59.000000%29' fill='%232EEC96'%3E%3Cpolygon points='70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");}

:invalid

美化表單的CSS高級技巧

根據本地瀏覽器驗證規則，如果輸入的內容是無效的，比如，輸入的電子郵件地址不是真正的電子郵件地址。通過 base64 ，給 input 添加一個 x 的背景圖，也同樣放置在右側。

input:invalid {border-color: var(--color-error);background-image: url("data:image/svg+xml,%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='//www.w3.org/2000/svg' xmlns:xlink='//www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-128.000000, -59.000000%29' fill='%23F44336'%3E%3Cpolygon points='157.848404 61.9920213 145.980053 73.8603723 157.848404 85.7287234 154.856383 88.7207447 142.988032 76.8523936 131.119681 88.7207447 128.12766 85.7287234 139.996011 73.8603723 128.12766 61.9920213 131.119681 59 142.988032 70.8683511 154.856383 59'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");}

還可以為每種輸入類型定製一些驗證消息。同樣使用 .help-text 的 span 元素的偽元素 ::before 來處理：

<!-- HTML --><label for="invalid-email">Invalid input</label><input type="email" id="invalid-email" value="notanemail"><span class="help-text"></span>/* CSS */input[type='email']:invalid + .help-text::before { content: 'You must enter a valid email.'}

:in-range/:out-of-range

美化表單的CSS高級技巧

這些選擇器用來檢測 number 的 input 輸入的值是否是 min 和 max 指定範圍內的值

<!-- HTML --><label for="out-of-range-input">Out-of-range input</label><input type="number" id="out-of-range-input" min="1" max="10" value="12"><span class="help-text"> (value must be between 1 and 10)</span>/* CSS */input:out-of-range + .help-text::before {content: 'Out of range';}

:checked

美化表單的CSS高級技巧

這個選擇器對於大多數人來說並不陌生。在製作自定義複選框和單選按鈕的樣式時，這個選擇器能夠很好的幫助我們檢測到複選框和單選按鈕被選中的狀態，再設置選中的樣式。示例中的複選框和 label 放在一個容器中，並且 label 放在 input 後。

在這裡推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都歡迎，不定期分享乾貨，包括我自己整理的一份前端資料和零基礎入門教程，歡迎初學者和在進階中的小夥伴。

<div class="checkbox"> <input type="checkbox"/> <label>Option</label></div>

在視覺上隱藏 input ，讓它從視圖中消失，但仍然可以點擊。然後使用 label::before 看起來像複選框（未選中）和使用 label::after 看起來像選中的複選框。我們使用 :checked 的選擇器將這兩個偽元素添加適當的樣式：

&:checked + label::before { background-color: var(--color-primary);}&:checked + label::after { display: block; position: absolute; top: 0.2rem; left: 0.375rem; width: 0.25rem; height: 0.5rem; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); content: '';}

總結

這篇文章通過一些我們熟悉和不熟悉，甚至是從未見過的選擇器。這些選擇器能幫助我們對錶單做更好的樣式美化，甚至以前一些需要通過JavaScript來輔助完成的，也可以直接使用純CSS來完成。

出處：https://www.w3cplus.com/css/advanced-css-form-styling.html
英文出處: https://jonathan-harrell.com/advanced-css-form-styling

美化表單的CSS高級技巧

相關推薦