大家好，我是半夏??，一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章，可以關注? 點贊 ?? 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,了解更多前端知識! 點我探索新世界！
原文鏈接 ==>http://sylblog.xin/archives/50
前言
一個優秀的網站永遠都不是冷冰冰的，情感化、人性化一直是現代化網站所追求的！情感化設計利用彩配色激發用戶情感，或高興，或溫暖，或寧靜祥和；利用簡單易懂，自由流暢的互動設計，吸參考戶點擊或參與；以及利用暖心體貼的界面文本設計，打動用戶等等，
不知道有多少人關注過蘋果的官方，大膽的顏色，驚人的影片，我覺得這就是具有情感的網站
雖然我們不是設計師，但是作為一個好的前端開發，在網站開發的時候也是需要一點人性化的意識，下面這兩個輸入框，在邊框 邊距 邊角都不相同，最終的效果也各不相同，
不討論具體的設計，單純的介紹幾個偽類，希望這幾個偽類，能讓你有所識訓，
:read-write
匹配規則
:read-write選擇器將在以下情況下匹配元素：
非readonly和disabled的input
input:read-write {
background: #2ecc71;
}
<input type="text" value="https://www.cnblogs.com/banxia-frontend/archive/2022/04/25/正常 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="https://www.cnblogs.com/banxia-frontend/archive/2022/04/25/diabled input" disabled />
<input type="text" value="https://www.cnblogs.com/banxia-frontend/archive/2022/04/25/readonly input" readonly />
其他不可編輯的元素
p:read-only {
background: #e74c3c;
}
<p >普通 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 可以設定，
沒有選中的效果
、
選中后的效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/464074.html
標籤：其他
上一篇：async和await的實作原理
下一篇：取消ts校驗的注釋