以下是一个简单的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),看起来更简洁。
  • 搜索按钮有鼠标悬停效果,背景色会在悬停时发生渐变。

标签: none

FoxSSL.COM,单域名SSL证书—35元/年,通配符证书—255元/年点击 购买

评论已关闭