iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
Modern Web

走入前端,才從0開始數,初學者歷程系列 第 29

day29-認識一些不太熟的偽類選擇器(下)

  • 分享至 

  • xImage
  •  

安安,今天是個特別低一天,是偽類選擇器最終章了,也剛好是day29!!!(媽呀我終於來到這天,喜極而泣Q_Q
然後還好昨天已經先打好一部分,否則今日a我整個過敏大爆發XDD完全無法集中精神RRR~(大家一定要好好愛護自己低身體,未來才能有好的肝啊(^ω^))
那大家一起來了解一下最後有哪些,長個小知識吧d(`・∀・)b


:disabled & :enabled 表單用偽類選取器

:disabled 禁用狀態

:enabled 啟用狀態

:required & :optional

:required 可選到必填欄位

:optional 可選到非必填欄位

:valid & :invalid 資料格式確認器

:valid 資料格式正確

:invalid 無效或錯誤的資料格式

:in-range & :out-of-range

是否在可接受範圍內給予對應的外觀設定的偽類選擇器。

:in-range 接受範圍內的狀態

:out-of-range 超過範圍的狀態

‼可設定上下限

<input type="number" min="10" max="20" class="aa">
aa:in-range{
	color: black;
}
aa:out-of-range{
	color: red;
}

★表單類型要是number瀏覽器才會幫你檢查是否在範圍內喔!

★★TIP :valid & :invalid與:in-range & :out-of-range的差異?★★

:valid & :invalid 判斷資料“格式”

:in-range & :out-of-range 判斷資料“範圍”


:read-only 唯讀

不可寫入的意思,單純想把資料秀出來給你看。

::placeholder 提示文字(有別於平常直接撰寫的placeholder)

能設定文字色彩,控制背景色彩。(蠻好用低!)

<input type="text" placeholder="我可以控制顏色" class="aa">
input::placeholder{
  color: pink;
}

偽類選擇器:完結。
參考資源:金魚選擇器
明天最後一日囉!明日見!


上一篇
day28-認識一些不太熟的偽類選擇器(中)
下一篇
day30-淺寫axios+完賽文
系列文
走入前端,才從0開始數,初學者歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言