手把手教你用CSS實現簡單大氣的輸入框
順便將接下來網站的登陸介面也改成這個樣式了。
先上一個效果圖：
在效果圖裡面我們看到有兩個輸入框，一個為文字輸入框，一個為密碼輸入框。
由於兩個輸入框的樣式大致差不多，所以我們只講述第一個輸入框的實作。
1.輸入框結構
實際上，這個輸入框有兩個部分組成：
分別是輸入框的提示內容和輸輸入框本體。
我們將輸入框的提示內容放進label標籤中，並且給label標籤新增一個for屬性，值為輸入框的id屬性值。
這樣使用者在點擊提示語句時，遊標會自動聚焦到輸入框中。
<div class="user_name">
<label for="userName" class="userNameTip">请输入您的用户名</label>
<input type="text" id="userName">
</div>到此為止，我們輸入框的結構就建置好了。
2.輸入框樣式
我們先為整個大盒子增加一個相對定位，方便後續我們對裡面元素的位置調整。順便設定一個整個盒子的大小。
.user_name {
position: relative;
width: 400px;
height: 200px;
}接下來我們就為輸入框改變一個樣式，畢竟這樣一個預設的框框實在太難看了。
.user_name{
width: 200px;
height: 50px;
position: absolute;
top: 50px;
left: 30px;
font-size: 20px;
}這裡我們先給整個輸入框的整體調整一個位置，然後設定一個字體大小，這樣我們的輸入框就有了一個基本的樣式。
下面就開始設定輸入框的樣式：
#userName{
display: inline-block;
width: 300px;
height: 30px;
color: #0FF;
font-size: 20px;
border: 0px transparent;
border-bottom: 2px solid #fff;
background-color: rgb(54, 54, 54);
}在這裡我們設定了輸入框的寬度，高度，字體顏色，字體大小，邊框，背景顏色。
因為我此時整個大背景顏色為rgb(54, 54, 54),為了不讓這個輸入框這麼突出沒所以我設定了輸入框的背景顏色與大背景顏色為一樣的顏色。
但是這樣還不夠，因為在輸入框獲得焦點的時候，輸入框外邊還有一個邊框，這樣會使得輸入框很醜。
透過outline屬性我們可以設定輸入框來獲得焦點時的邊框樣式。
在效果圖中，我們可以看見輸入框獲得焦點時，輸入框下邊有一個藍色的邊框，這個邊框的寬度為2px，顏色為#0FF。
我們我們這樣給輸入框來一個樣式：
#userName:focus{
outline: none;
border-bottom: 2px solid #0FF;
}這樣輸入框的樣式就出來了：
3.輸入框提示語
在效果圖裡面輸入框還未獲得焦點的時候，提示語句在輸入框裡面的，這個就是我們使用絕對定位來實現的，調整到合適的位置，將提示語句放在輸入框裡面。
且此時文字的顏色為白色。
.userNameTip{
position: absolute;
top: 0px;
left: 0px;
font-size: 20px;
color: #fff;
}最後這整個輸入框的樣式就是這樣：
#當然現在這是一個靜態的輸入框，沒有任何的交互，我們接下來就來實現這個輸入框的交互作用。
4.輸入框互動
互動肯定需要一個動畫來實現，這裡我們發現在輸入框獲得焦點之後，提示文字會變小，顏色也會隨之改變，然後移動到輸入框的上方，這個就是我們需要實現的效果。
失去焦點之後,我們就會判斷，這個輸入框裡面是否有內容：
如果有內容的話，動畫就不移除，一直保持動畫的結束狀態；如果沒有內容，就移除動畫回到初識狀態。
那麼我們定義一個動畫：
@keyframes user {
from{
top: 0px;
font-size: 20px;
}
to{
top: -20px;
font-size: 12px;
color: #0FF;
}
}現在有一個問題，我們點擊輸入框，最後將這個動畫加入輸入框的提示語句上，那麼我們如何將動畫加上去呢？
我這裡使用的jquery中對class的操作來實現，也就是利用jQuery中的addClass()和 removeClass()方法來實作。
那麼在此之前，我們就需要先將動畫寫進一個類別裡面，然後透過jQuery來操作這個類別。
我這裡簡單的寫了一個class，然後將動畫寫進去：
.userNameTipA{
animation: user 0.3s linear normal forwards;
animation-iteration-count: 1;
}然後我們就可以透過jQuery來操作這個類了：
$('#userName').focus(function () {
$('.userNameTip').addClass('userNameTipA');
console.log("点击了");
})
$('#userName').blur(function () {
let val = $('#userName').val();
if (val) {
return;
} else {
$('.userNameTip').removeClass('userNameTipA');
}
});最後點選儲存，運行，就可以看到效果了。
總結
其實這個demo還是很簡單的，就是利用一些定位來調整輸入框的位置，然後針對輸入框的聚焦樣式和失焦樣式來實現動畫，最後透過jQuery來操作這個動畫。
推薦學習：《css影片教學》
以上是手把手教你用CSS實現簡單大氣的輸入框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
bootstrap怎麼設置框架
Apr 07, 2025 pm 03:27 PM
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
bootstrap怎麼調整大小
Apr 07, 2025 pm 03:18 PM
要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-
