順便將接下來網站的登陸介面也改成這個樣式了。
先上一個效果圖：
在效果圖裡面我們看到有兩個輸入框，一個為文字輸入框，一個為密碼輸入框。
由於兩個輸入框的樣式大致差不多，所以我們只講述第一個輸入框的實作。
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中文網其他相關文章！
什麼是CSS Flexbox？Apr 30, 2025 pm 03:20 PM文章討論了CSS FlexBox，這是一種佈局方法，用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法，將其與CSS網格進行了比較，並詳細瀏覽了瀏覽器支持。
我們如何使用CSS使網站迅速響應？Apr 30, 2025 pm 03:19 PM本文討論了使用CSS創建響應網站的技術，包括視口元標籤，靈活的網格，流體媒體，媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用，並推薦CSS框架
CSS盒裝屬性有什麼作用？Apr 30, 2025 pm 03:18 PM本文討論了CSS盒裝屬性，該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box，Border-Box和Padding-Box之類的值，以及它們對佈局設計和形式對齊的影響。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
SublimeText3 Linux新版
SublimeText3 Linux最新版
記事本++7.3.1
好用且免費的程式碼編輯器
