要实现实时搜索框效果，可以使用CSS的:focus伪类和input元素的oninput事件。具体的步骤如下：
创建一个输入框元素(input)，并设置input元素的样式。
使用:focus伪类来为输入框添加聚焦时的样式，以突出显示输入框。
使用oninput事件来监听输入框内的文本变化，并实时更新搜索结果。
使用CSS选择器来匹配搜索结果，以便为匹配的文本添加高亮颜色。
以下是一个实现实时搜索框效果并添加高亮颜色的CSS样式代码示例：
/* 设置输入框样式 */
input {
width: 300px;
height: 30px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
}
/* 设置输入框聚焦时的样式 */
input:focus {
outline: none;
border-color: #66afe9;
box-shadow: 0 0 5px #66afe9;
}
/* 匹配搜索结果并添加高亮颜色 */
.highlight {
background-color: yellow;
}在HTML中，可以将上述CSS样式应用于输入框元素，并添加一个用于显示搜索结果的div元素。JavaScript代码如下：
// 获取输入框和显示搜索结果的div元素
const input = document.querySelector('input');
const results = document.querySelector('#results');
// 监听输入框的文本变化
input.addEventListener('input', function() {
// 获取输入框中的文本
const searchText = input.value.toLowerCase().trim();
// 遍历搜索结果
results.querySelectorAll('li').forEach(function(item) {
// 匹配搜索文本
if (item.textContent.toLowerCase().includes(searchText)) {
// 添加高亮样式
item.classList.add('highlight');
} else {
// 移除高亮样式
item.classList.remove('highlight');
}
});
});在上述示例中，我们使用了JavaScript来监听输入框的事件并实时更新搜索结果。在遍历搜索结果时，我们通过textContent属性来获取每个搜索结果的文本内容，并使用includes方法来判断搜索文本是否匹配。如果匹配，则添加.highlight类名以添加高亮样式。如果不匹配，则移除.highlight类名以移除高亮样式。