我覆盖了一下文本框的模板 ... 不然在这个自动完成的文本框的右边会有一个小图标 ... 搜索的时候，会出现一个动态显示的图标 ..

查看一下这个元素 .. 这个元素上有个 form-autocomplete 类 .. 复制一下 .. 在核心目录的下面我们可以搜索一下这个 css 类的名字 ... 应该可以找到一些线索 ..

我发现 stable 主题下面的 autocomplete-loading.module.css 这个样式表里，有一些相关的样式 ..

你会看到，这里有几个背景样式 ..

回到浏览器 ..

在我的样式表里 .. 设置了文本框的背景 .. 取消这个样式，你会看到文本框上面会出现一个小图标 ..

复制一下这块样式 ..

找到我的自定义模块下面的 semantic .. src .. site .. elements .. input.overrides ... 把复制的样式粘贴到这里 ..

再修改一下样式的选择器 .. 让这块儿样式会覆盖之前定义的 input 元素的样式 ..

然后修改一下背景图像的位置 ...

回到命令行 .. 进入到我的自定义模块下面的 semantic .. 执行一下 gulp watch ..

保存一下文件 ... 你会发现，gulp 重新给我们编译好了 input 这个样式表 ..

再去预览一下 ...

在控制台上出现了一个错误 .. 说有个图像没找到 ..

因为我的样式表里用了两个背景图像，但是在指定的目录的下面没有找到这两个背景图像 ..

找到 core .. themes .. stable .. images . throbber-active.gif 是我需要的图像 .. 复制一份 .. 放在我的自定义模块的下面 ..

还有下面这个 trobber-inactive.png .. 也把它放在我的模块的下面 ..

回到浏览器 .. 刷新一下 ..

现在这个文本框的右边就会显示一个小图标 ... 再文本框里输入点内容 ...

在搜索的时候，文本框的右边，会出现一个动态显示的小图标 .. 就是那个 throbber-active.gif 这个动态图像 ...