學會這9個偽類,讓你的頁面 表單更人性化！！！

搞前端的半夏發表於2022-04-25

大家好，我是半夏?，一個剛剛開始寫文的沙雕程式設計師.如果喜歡我的文章，可以關注➕ 點贊 ? 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,瞭解更多前端知識! 點我探索新世界！

原文連結 ==>http://sylblog.xin/archives/50

前言

一個優秀的網站永遠都不是冷冰冰的，情感化、人性化一直是現代化網站所追求的！情感化設計利用彩配色激發使用者情感，或高興，或溫暖，或寧靜祥和；利用簡單易懂，自由流暢的互動設計，吸引使用者點選或參與；以及利用暖心體貼的介面文字設計，打動使用者等等。

不知道有多少人關注過蘋果的官方，大膽的顏色，驚人的動畫，我覺得這就是具有情感的網站

雖然我們不是設計師，但是作為一個好的前端開發，在網站開發的時候也是需要一點人性化的意識，下面這兩個輸入框，在邊框 邊距 邊角都不相同，最終的效果也各不相同。

不討論具體的設計，單純的介紹幾個偽類，希望這幾個偽類，能讓你有所收穫。

:read-write

匹配規則

:read-write選擇器將在以下情況下匹配元素：

非readonly和disabled的input

input:read-write {
  background: #2ecc71;
}

<input type="text" value="正常 input" />

非readonly和disabled的textarea

textarea:read-write {
  background: #2ecc71;
}
<textarea >正常 textarea</textarea>

可以設定contenteditable的元素

p:read-write {
  background: #2ecc71;
}
<p  contenteditable>contenteditable p</p>

:readonly

匹配規則

具有readonly/disabled 屬性的input/textarea等form元素

input:read-only {
  background: #e74c3c;
}
<input type="text" value="diabled input" disabled />
<input  type="text" value="readonly input" readonly />

其他不可編輯的元素

p:read-only {
  background: #e74c3c;
}
<p class="testInput">普通 p</p>

:required

我覺得這個屬性真的特別好，之前我們在做表單的時候，經常會在前面加一個*表示必須輸入，或者當使用者輸入完之後提示一下某某欄位是必須輸入的，使用者體驗真的確實不好。但是有個這個屬性，我們就可以來針對必須輸入的input進行個性化的設定。

匹配規則

設定了required屬性的<input>，<select>, 或 <textarea>元素

input:required,
textarea:required {
  border-color: red ;
}

:focus

設定當前由鍵盤tab或由滑鼠啟用的元素的樣式。

:focus 基本上可以作用在大部分的元素上，設定了contenteditable或者tabindex 的元素也支援。

像<a>, <button>, <input>, <textareas> 各個瀏覽器都有不同的預設樣式。

:focus可以設定為全域性也可以針對特定的元素。

 :focus {
        background: #2ecc71;
      }

:disabled

<button>，<input>，<textarea>，<optgroup>，<option>和<fieldset> 都可以設定:disabled 屬性

input:disabled {
  background: #e74c3c;
}

:enabled

<input>, <select>, <textarea>可以設定屬性，與:disabled 相反。

:invalid和:valid

這兩個屬性在使用者與頁面上的表單互動時向他們提供反饋。

比如下面這個例子：驗證郵箱格式是否正確，之前我們會怎麼做，當使用者輸入完成提交的時候，彈對話方塊告訴使用者格式不正確。用這兩個屬性就讓事情很簡單！

input:invalid {
  background: hsla(0, 90%, 70%, 1);
}

input:valid {
  background: hsla(100, 90%, 70%, 1);
}


<label for="email">Email:</label>
<input type="email" name="email" />

開始的效果；

不正確的效果：

正確的效果

:checked

僅<input> type為radio 和 checkbox 可以設定。

沒有選中的效果
、
選中後的效果

相關文章