有關如何僅使用
HTML、CSS和JavaScript從頭開始重新創建Material Design文本字段的設計和動畫的指南。
Material Design是Google開發的一種流行的UI 設計系統。使用Material Design的應用程序通常包括響應式動畫、吸引人的顏色組合以及深度效果（例如光照和陰影）。
在本文中，我們將學習如何僅使用HTML、CSS和JavaScrip重新創建Material Design文本字段的設計和動畫。我們將克隆輪廓文本字段變體，但可以採取類似步驟來創建填充變體。
完成後我們將擁有以下內容：
創建基本輸入和標籤
我們將從使用 HTML 創建文本字段的基本結構開始。
<div class='input-container'> <input < span >type='text'
id ='fname' name='fname' value='' aria-labelledby='label-fname' /> <label class='label' for =' fname' id='label-fname'> <div class='text'> ;名字</div> < span role='presentation' > </label>
</div>我們創建一個input元素以允許在文本字段中鍵入內容，並使用一個label< /code>元素作為文本字段的標籤。這個label(First Name) 的文本被包裹在一個div (. text) 中，因為我們稍後要製作文本動畫。
我們使用另一個div(.input-container) 來包裹theinput和label元素，以便稍後我們可以將the 放置在具有絕對定位的label之上。 input
樣式輸入和標籤
input讓我們為元素及其容器添加一些樣式。
.input-container {< /span> position: relative;< pre role='presentation' >}input {< /span> height: 48px;< pre role='presentation' > width: 280px;< span role='presentation' > border: 1px solid #c0c0c0;
border-radius: 4px; box-sizing: border-box; padding: 16px;}< /span>我們position: relative為容器設置，以便當我們為設置時，將label相對於它定位，而不是整個頁面。 position: absolute``label
我們現在將添加樣式label。
.label { position: absolute; top: 0; bottom: 0; left: 16px; display: flex; align-items: center ;}除了position: absolute我們剛剛談到的，我們設置top: 0 並匹配輸入容器bottom: 0的label高度。
有input一個16px填充，所以我們設置 left: 16px使標籤匹配這個填充，並從與用戶將鍵入的任何文本相同的位置開始。最後，我們使用和label將輸入容器中的內容水平居中。 display: flex``align-items: center
刪除指針事件
它現在看起來像一個文本字段，但如果將鼠標懸停在上label，您會看到鼠標指針指示這是可以單擊的內容。這意味著它可以阻止對 的點擊input，這會造成糟糕的用戶體驗。
pointer-events: none幸運的是，我們可以通過為label元素設置來輕鬆解決這個問題。
.label { ... pointer-events: none;}
樣式輸入字體
讓我們更改輸入文本的字體系列和字體大小。我們將為標籤做同樣的事情。
input, . label .text { font-family: 'Segoe UI'; font-size: 16px;}
焦點樣式輸入
讓我們使用CSS 選擇器在獲得焦點時:focus更改一些樣式。 input
input:focus { outline: none; border: 2px solid blue ;}這樣，當輸入獲得焦點時，輸入邊框會改變顏色並變粗。
輸入焦點上的樣式標籤
我們還可以在輸入標籤獲得焦點時設置它的樣式。獲得焦點後，標籤應縮小，向上移動以符合頂部輸入邊框，並更改顏色以匹配輸入邊框。
input:focus + .label .text { font-size: 12px; transform : translate(0, -50%); background-color: white; < span >padding-left: 4px;
padding-right< /span>: 4px; color: blue ;}我們設置padding-left: 4px並padding-right: 4px在標籤和頂部輸入邊框之間添加一些視覺間距。
為了平穩過渡，我們將向transition標籤添加一個屬性。
CSS.label .text {transition: all 0.15s ease-out;}
當非空輸入失去焦點時，將標籤保持在頂部
我們還有一件事要做。當您在input元素中輸入文本並刪除 時input，標籤將返回到其原始位置。
它不應該以這種方式表現。但現在我們要用一些 CSS 和 JavaScript 來修復它。
請記住，我們已經為元素定義了一個value屬性。 input我們將其設置為空字符串。
HTML< /pre><input type='text' id ='fname' name='fname' value='' aria-labelledby='label-fname' />
使用:not偽類，我們使輸入在聚焦時具有與未聚焦和非空時相同的樣式。唯一的區別是輸入邊框和標籤的顏色。
input:focus + .label .text, :not(input[value='']) + .label .text {< span role='presentation' > font-size: 12px;
transform: translate(0, -150%); background-color: white; padding-left: 4px; padding-right: 4px;}input:focus + .label .text { color: blue; }我們還沒有完成。儘管valueDOM 屬性input會根據輸入的內容而變化，但value HTML 屬性保持不變。我們需要一種方法使其與value屬性保持同步。
我們可以通過為該input事件添加一個偵聽器來做到這一點，只要輸入字段中的文本發生變化，該偵聽器就會觸發。在偵聽器中，我們將使用該setAttribute()方法使用value屬性的當前值更新< /span>value屬性。
JavaScript< /pre>const input = document.getElementById('fname');input.addEventListener('input', () => { input.setAttribute('value', input.value);});
而已。我們已經成功地創建了一個帶輪廓的 Material Design 文本字段。
如果您使用的是像 Vue 或 React 這樣的框架，那麼將我們所做的一切抽象為可重用的組件應該非常容易。
這是完整的源代碼：
鏈接地址：https://codepen.io/tariibaba/pen/ExLbVoo
如果有用，記得點贊支持哦！
- THE END -
?
如果覺得內容有用，記得點贊支持哦！如果你正在學習前端，我們這裡有完整的html/CSS教程資料, 如果需要html+css階段完整教程，我們在釘釘群裡有全套的課程包含（入門到精通課程、4個綜合項目、30個練習案例！）如果需要，可以通過下方圖片長按掃碼，邀請你進入釘釘群學習！
長按二維碼可以直接加好友即可領取資料！
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/How%20to%20Create%20a%20Material%20Design%20Text%20Field%20Using%20HTML%20CSS%20and%20JavaScript.html
支付宝扫一扫 
评论列表（196条）
测试