以下是一个简单的CSS美化搜索框的示例代码:
HTML结构:
<div class="search-container">
<input type="text" class="search-input" placeholder="搜索...">
<button class="search-button">搜索</button>
</div>
CSS代码:
/* 搜索框容器样式 */
.search-container {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 25px;
overflow: hidden;
width: 300px;
height: 40px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* 输入框样式 */
.search-input {
border: none;
padding: 0 15px;
height: 100%;
width: 80%;
font-size: 14px;
outline: none;
}
/* 搜索按钮样式 */
.search-button {
border: none;
background-color: #007BFF;
color: white;
width: 20%;
height: 100%;
cursor: pointer;
transition: background-color 0.3s ease;
}
.search-button:hover {
background-color: #0056b3;
}
这个搜索框具有以下美化特点:
- 整体是一个圆角矩形,有淡淡的边框阴影。
- 输入框和按钮的布局使用了弹性布局(flex),使得两者在容器内排列整齐。
- 输入框没有边框,且鼠标聚焦时没有默认的外框(
outline
),看起来更简洁。 - 搜索按钮有鼠标悬停效果,背景色会在悬停时发生渐变。
评论已关闭