讓input元素增高并底部對齊文字的技巧
在網頁開發中，常常需要調整input元素的高度，尤其是在設計需要較高輸入框的表單時。然而，默認情況下input文字垂直居中，若需文字底部對齊，該如何實現呢？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input { height: 60px; } </style> </head> <body> <input type="text"> </body> </html>
此例中，輸入框高度為60px，文字垂直居中。我們的目標是將文字置于底部。
除了使用padding，還有更巧妙的方法：隱藏input默認邊框，用帶邊框的容器包裹它。具體步驟如下：
首先，隱藏input的默認邊框，使其寬高充滿父容器。然后，創建一個帶邊框的div作為父容器，并將input置于div底部。此方法不僅實現文字底部對齊，也提升了輸入框的美觀度。
以下是實現代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .input-container { height: 60px; border: 1px solid #ccc; display: flex; align-items: flex-end; /* 將內容垂直對齊到底部 */ } input { width: 100%; height: 100%; border: none; /* 隱藏input的默認邊框 */ outline: none; /* 移除input的默認焦點樣式 */ } </style> </head> <body> <div class="input-container"> <input type="text"> </div> </body> </html>
這里使用了Flexbox布局，將.input-container設置為display: flex，并用align-items: flex-end將內部input元素對齊到底部。輸入框高度仍為60px，但文字已位于底部。
這種方法簡潔高效，并具有靈活性，可根據需求調整父容器樣式，使輸入框更符合設計要求。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
