Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Alphy Gacheru's avatar

How to change the Algolia autocomplete input color when the input is in focud

I have the following code and when the search input is in focus the outline color changes. How can I change that color?

  <div class="app-container">
    <h1>Vue Application</h1>
    <div id="autocomplete" />
  </div>
</template>

<script lang="jsx">
import { h, Fragment, render, onMounted } from "vue";
import algoliasearch from "algoliasearch/lite";
import { autocomplete, getAlgoliaResults } from "@algolia/autocomplete-js";
import "@algolia/autocomplete-theme-classic";

export default {
  name: "AutoComplete",
  setup() {
    onMounted(() => {
      autocomplete({
         onStateChange({ state }) {
    console.log(state.query); // Actual value
  },
        container: "#autocomplete",
        getSources({ query, setQuery, refresh }) {
          return [
            {
              sourceId: "properties",
              getItems({query}) {
                return getAlgoliaResults({
                  searchClient: algoliasearch(
                    "5ALV3LSLJ1",
                    "bde35d15e4037209a089a5731721c6c1"
                  ),
                  queries: [
                    {
                      indexName: "properties",
                      query,
                      params: {
                        hitsPerPage: 5,
                      },
                    },
                  ],
                });
              },
      templates: {
                item({ item, components }) {
                  return (
                    <div className="aa-ItemWrapper">
                      <div className="aa-ItemContent">
                        <div className="aa-ItemContentBody">
                          <div className="aa-ItemContentTitle">
                            <components.Highlight hit={item} attribute="location" />
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                },
              },
          
            },
          ];
        },
        renderer: { createElement: h, Fragment, render },
      });
    });
  },
};
</script>
0 likes
1 reply
Mercer14's avatar

To change the color of the Algolia autocomplete input when it is in focus, you can use CSS. You can add a CSS class to the input element when it is in focus, and then define the styles for that class. Here's an example:

Define a CSS class for the input when it is in focus, for example: .algolia-autocomplete--input:focus { outline-color: red; } Add the CSS class to the input element by using the classNames option https://www.marykayintouch.one/ in the autocomplete function. Modify the autocomplete function call in your code to include the classNames option: autocomplete({ classNames: { input: 'algolia-autocomplete--input', ... }, ... }); This will add the algolia-autocomplete--input class to the input element. When the input is in focus, the :focus pseudo-class will be applied to this class, and the outline color will be changed to red.

Note that you can customize the outline-color property to any color you like. Also, make sure to include this CSS code in your project's stylesheet.

Please or to participate in this conversation.