實現表單元素的placeholder效果

2021-10-12 02:49:47 字數 890 閱讀 5737

在h5中給input標籤新增了乙個佔位符屬性placeholder用來做提示文字

可是我想在其他元素裡使用這個屬性,那怎麼辦呢**?**

1.新建乙個div讓它變成可編輯狀態

//css

#test

//html

contenteditable是h5中新新增的全域性屬性,contenteditable屬性可以讓元素變為乙個可編輯狀態

2.我們用**:empty 選擇器 :before 選擇器**進行設定

#test:empty::before
:empty 選擇器匹配沒有子元素(包括文字節點)的每個元素:before 選擇器在被選元素的內容前面插入內容當這個元素在沒有子元素或文字時通過:before選擇器在元素前面新增乙個內容(這個內容是在元素內部新增的)

效果如下

3.實現div獲取焦點時提示文字的顯示和隱藏

#test:focus::before
:focus 選擇器用於選取獲得焦點的元素當我選中div時通過:before讓content的值為none;

效果如下:

HTML表單元素

表單元素是允許使用者在表單中 比如 文字域,下拉列表,單選框,核取方塊等等 輸入資訊的元素 表單標籤 文字域 text fields 當使用者要在表單中鍵入字母,數字等內容時,就會用到文字域 單選按鈕 radio buttons 當使用者從若干給定的的選擇中選取其一時,就會用到單選框 核取方塊 ch...

form表單元素

文字框 text 密碼框 password 文字域 textarea 單選框 radio 同一組單選按鈕的name取值一定要一致 核取方塊 checkbox 下拉列表框 選項 如果所有都沒有寫selected selected 則預設顯示第乙個的選項值 提交 submit value值是顯示在按鈕上...

html表單元素

自學打卡 2 form 表單元素,讓使用者把資料提交給伺服器 action 指定把請求和資料提交給哪個頁面 伺服器。元素 type text 文字內容 password 密碼 hidden 隱藏框 checkbox 核取方塊 radio 單選框 submit 提交 reset 重置 image 可以...