關鍵在於使用css selectors levle4裡的一些偽類實現表單驗證，這些偽類有：
上面的案例就是使用了:in-range和:out-of-range，接下去我們來一一解讀下。
:required可以選中具有required屬性的表單元素，可以是input、select和textarea，例如下面這些元素都會被選中。
type="name"
required>
type="checkbox"
required>
type="email"
required>
name="name"
id="message"
cols="30"
rows="10"
required>
textarea>
name="nm"
id="sel"
required>
select>
/*可選表單樣式*/
input
:optional,
select
:optional
/*必選表單樣式*/
input
:required,
textarea
:required
/*可選表單提示文字*/
input
:optional+label
::after
/*必選表單提示文字*/
input
:required+label
::after
/*可選表單啟用效果*/
input
:optional
:focus,
select
:optional
:focus
/*必選表單啟用效果*/
input
:required
:focus,
select
:required
:focus,
textarea
:required
:focus
input
:out-of-range
input
:in-range~ label
::after
input
:out-of-range ~ label
::after
input
:invalid
input
:valid~ label
::after
input
:invalid ~ label
::after
例如下面****所示的元素，都可以啟用:read-only偽類選擇器。
type="text"
disabled>
type="number"
disabled>
type="number"
readonly>
name="nm"
id="id"
cols="30"
rows="10"
readonly>
textarea>
class="random">
div>
這個比較簡單，就不再做案例。謝謝。
上述的幾個偽類選擇器在標準瀏覽器(chrome、safari、opera、firefox)裡支援良好，ie支援不好。
純CSS實現表單驗證
github krisachan 在我們的日常業務中，表單驗證是個很常見設計需求，像一些登入註冊框，問卷調查也都需要用到表單驗證。一般我們的實現思路都是js監聽input框的輸入內容，判斷使用者輸入內容，從而以此來決定下一步的操作。例如這樣 以下例子來自優秀的開源ui庫，element number...
多個form 驗證 css實現input表單驗證
我有這個想法是因為我想完成乙個自動補全的input部件，最基本的功能是 如果input沒有內容，這隱藏下拉框 反之，顯示下拉框 我找到了乙個也許不是很完美的實現方案，描述中可能會有一些細微的區別，不過我還是很希望能做這個簡單的分享 首先，我們構造乙個簡單的form表單，僅僅只有乙個input 當輸入...
純css實現箭頭
很久之前收集的，忘記出處了。1.梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 border 10px solid 000 border left color f00 width 10px height 10px 2.三角形 當元素寬 高為零，且其他邊為透明顏色時，可以形...