使用CSS与JavaScript创建带提示的搜索输入框教程

="请输入关键词”class=”init”/> </body> </html> 上述代码中，我们创建了一个基本的HTML结构，包括一个`<input>`标签用于定义输入框。`<style>`部分定义了两个CSS类：`.init`和`.highlight`，分别对应输入框无焦点时（默认状态）和有焦点时的样式。`.init`类设置了提示信息的颜色为灰色，并在失去焦点时显示，而`.highlight`类则是当输入框获取焦点后，去除默认提示，改变颜色以突出用户输入。 `<script>`部分包含了两个JavaScript函数：`txt_onfocus()`和`txt_onblur()`。这两个函数分别在输入框获取焦点和失去焦点时被调用。`txt_onfocus()`用于清除默认的提示文本并改变输入框的样式，`txt_onblur()`则在输入框失去焦点时检查是否有用户输入，如果没有，则恢复默认提示和初始样式。 第二步：实现背景和边框效果 为了使搜索框更具吸引力，我们可以使用CSS来定制其背景色、边框样式以及圆角等。例如，可以添加以下CSS样式： ```css input[type="text"] { background-color: #F8F8F8; /* 设置背景色 */ border: 1px solid #ccc; /* 设置边框宽度、样式和颜色 */ border-radius: 5px; /* 设置边框圆角 */ padding: 5px; /* 内边距，增加输入框内部空间 */ } ``` 第三步：实现选择功能 如果需要在输入框内提供预设选项，可以使用`<datalist>`标签来创建下拉选择列表。例如： ```html <input type="text" list="searchOptions"> <datalist id="searchOptions"> <option value="Option 1"> <option value="Option 2"> <option value="Option 3"> </datalist> ``` 这样，用户在输入框中键入内容时，会显示匹配的预设选项供他们选择。 第四步：添加搜索图标 可以通过CSS伪元素和图标字体库（如Font Awesome）添加搜索图标。例如： ```css input[type="text"] { position: relative; } input[type="text"]::before { content: "\f002"; /* 使用Font Awesome的搜索图标Unicode值 */ font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); } ``` 设计一个带有选择和提示功能的检索框，主要涉及到HTML、CSS和JavaScript的综合运用。通过控制输入框的样式、事件处理以及与数据列表的交互，我们可以实现一个既美观又实用的搜索框。记得在实际项目中根据需要调整细节，使其符合整体网页的设计风格。