write a beautiful search input full code
<!DOCTYPE html>
<html>
<head>
<title>Beautiful Search Input</title>
<style>
.search-container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
}
<pre><code> .search-container input[type="text"] {
width: 300px;
height: 50px;
border: none;
border-radius: 25px;
background: #f2f2f2;
padding: 0 20px;
font-size: 18px;
outline: none;
transition: all 0.3s ease-in-out;
}
.search-container input[type="text"]:focus {
width: 400px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.search-container button {
width: 50px;
height: 50px;
border: none;
background: #f2f2f2;
color: #333;
border-radius: 25px;
margin-left: -50px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-container button:hover {
background: #555;
color: #fff;
}
</style>
</code></pre>
</head>
<body>
<div class="search-container">
<input type="text" placeholder="Search...">
<button>Go</button>
</div>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/B0D 著作权归作者所有。请勿转载和采集!