今天來實作一個很簡單的動態搜索框，效果圖如下
在搜索框聚焦之前是這樣的：
聚焦之后是這樣式的：
實作思路如下：
- 先寫一個input輸入框，
placeholder="搜索.."，記得嵌套在form表單中， - 第二步設定input輸入框的樣式
- 當input聚焦的時候設定寬度為你想要的寬度即可，一般建議為百分比設定，這是考慮到后期加入回應式會更好改，
最后附上原始碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動態搜索框</title>
<style>
input[type=text] {
width: 130px;
/* 重新定義盒子模型的樣式 */
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
/* 設定影片 */
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<p>動態搜索框:</p>
<form>
<input type="text" name="search" placeholder="搜索..">
</form>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229468.html
標籤：其他
上一篇：CSS特效二：按鈕影片效果