CSS实现Google搜索栏（输入框）悬停时突出显示的方法

技术文摘

2025-01-10 16:08:39 小编

在网页设计中，为输入框添加悬停效果能够显著提升用户体验。Google搜索栏悬停时突出显示的效果简洁又实用，下面我们就来探讨如何用CSS实现这一效果。

我们需要创建HTML结构。一个基本的搜索栏结构可能类似这样：

<!DOCTYPE html>
<html>
<head>
    <title>Google搜索栏悬停效果</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <form>
        <input type="text" id="search-bar" placeholder="Google搜索">
        <button type="submit">搜索</button>
    </form>
</body>
</html>

这里我们创建了一个简单的表单，包含一个输入框和一个提交按钮。

接下来就是关键的CSS部分。我们先对输入框进行基本样式设置，让它看起来像个搜索栏：

#search-bar {
    width: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
}

这段代码设置了输入框的宽度、内边距、边框、边框半径以及字体大小，并去掉了聚焦时的默认边框。

要实现悬停效果，我们使用CSS的:hover伪类。当鼠标悬停在输入框上时，我们希望它有突出显示的效果，比如改变边框颜色：

#search-bar:hover {
    border-color: #4285f4;
    box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

这里我们将悬停时的边框颜色改为Google标志性的蓝色（#4285f4），同时添加了一个淡淡的阴影效果，通过box-shadow属性实现。阴影的颜色和透明度可以根据需要调整。

对于提交按钮，我们也可以添加类似的悬停效果，让整个搜索栏区域更加统一和交互性更强：

button[type="submit"] {
    padding: 10px 20px;
    background-color: #4285f4;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
button[type="submit"]:hover {
    background-color: #357ae8;
}

这样，当鼠标悬停在按钮上时，背景颜色会变深，给用户明确的交互反馈。

通过以上的HTML和CSS代码，我们就成功实现了类似Google搜索栏悬停时突出显示的效果。这种效果不仅能吸引用户注意力，还能增强网页的交互性和美观度，在实际的网页设计项目中具有很高的实用价值。

TAGS: CSS 悬停效果输入框 Google搜索栏

万千站长工具

技术文摘

CSS实现Google搜索栏（输入框）悬停时突出显示的方法

欢迎使用万千站长工具！