國外的CSS搜索框在設計上備受關注。它們不僅美觀而且功能強大，可以讓用戶輕松地查找他們需要的信息。這里介紹一些值得關注的CSS搜索框。

/* 1. 扁平化設計*/
.search-box {
border: none;
background: #f2f2f2;
padding: 10px;
border-radius: 10px;
box-shadow: none;
outline: none;
}
/* 2. 動態效果*/
.search-box {
border: none;
background: #f2f2f2;
padding: 10px;
border-radius: 10px;
box-shadow: none;
outline: none;
transition: all 0.3s;
}
.search-box:focus {
background: #fff;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
/* 3. 動態提示*/
.search-box {
position: relative;
}
.search-box input[type="text"] {
width: 100%;
border: none;
background: #f2f2f2;
padding: 10px;
border-radius: 10px;
box-shadow: none;
outline: none;
transition: all 0.3s;
}
.search-box input[type="text"]:focus + .tip {
display: block;
}
.tip {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 10px;
}
/* 4. 搜索按鈕*/
.search-box {
display: flex;
align-items: center;
}
.search-box input[type="text"] {
flex: 1;
}
.search-box button {
min-width: 100px;
background: #4CAF50;
color: #fff;
border: none;
padding: 10px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
}
.search-box button:hover {
background: #3e8e41;
}

這些CSS搜索框僅僅是冰山一角。設計人員可以根據自己的需求定制搜索框，使其更加美觀和實用。