技术文摘
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搜索栏悬停时突出显示的效果。这种效果不仅能吸引用户注意力，还能增强网页的交互性和美观度，在实际的网页设计项目中具有很高的实用价值。