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

2022-10-10 07:33:10 字數 2313 閱讀 8158

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

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

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

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

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

非readonly和disabled的input

非readonly和disabled的textarea

可以設定contenteditable的元素

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

其他不可編輯的元素

p:read-only 

普通 p

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

設定了required屬性的,, 或 元素

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

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

像, , , 各個瀏覽器都有不同的預設樣式。

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

:focus
,,,,和都可以設定:disabled 屬性

input:disabled
, , 可以設定屬性,與:disabled 相反。

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

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

input:invalid 

input:valid

email:

開始的效果;

不正確的效果:

正確的效果

僅type為radio 和 checkbox 可以設定。

沒有選中的效果

、選中後的效果

讓你學會善始善終的10個有效方法

我們都會在某個階段遇到這種情況。我們滿懷激情地開始實現乙個非常棒的創意,但在某個地方,這種活力消失了,我們忘記了最終的目標。正是這種把現在每個計畫每個任務每個目標堅持到底的能力把乙個平凡的想法和優秀成功的想法區別開來。有很多好處可以解釋這種堅持到底的重要性 但是,留給我們的問題,如果完成是非常重要的...

看一遍讓你永遠記住偽類和偽元素的區別

這些天在做筆記的時候發現自己對偽類和偽元素區分的還是不夠清楚 我就到網上收集了各種之資料,我也是弄清楚了它們之間 的區別,相信看了這篇部落格你也會更加清楚。偽類用於選擇dom樹之外的資訊,包含那些 匹配指定狀態的元素 比如 visited,active 或是 不能用簡單選擇器進行表示的資訊 後者包含...

「悄悄」讓你變笨的9個小細節

不少人隨著年紀越大發現自己很多身體機能都在不斷地下降,有些人更發覺自己變苯了,這與年紀好象有關,是不是自己的年紀真的大了所以越來越苯呢?其實並非如此,你身體在退化有部分原因可能與你平時的習慣有關。忽視早餐 不吃早餐使人的血糖低於正常水平,對大腦營養 不足,久之對大腦有害。此外,早餐質量與智力發展也有...