HTML Searchbar's Styles Changing Onclick

Question

This is probably a very big oversight on my end, but I have added a search-bar to my website, and when you click it, the border style changes to a black and white border, I don't want it to do that. I would like the border to stay the same on click of the search-bar. Thanks.

let searchBar = document.querySelector('.searchBar');
let alertOnce = 0;

searchBar.addEventListener("click", () => {
  alertOnce++;
  
  if (alertOnce == 1) {
    alert("note, you can't have multiple words.")
  }
})

<input type="search" placeholder="" class="searchBar" />

score -1 · Answer 1 · answered Jul 19 '23 at 19:49

-1

As far as, I understood your problem, To prevent the changing border style on clicking on the input field, you can set outline css property to none.

#css

input {
   outline: none;
}

<input type="text">

And when outline is set to none

input {
  outline: none;
}

<input type="text"/>

answered Jul 19 '23 at 19:49

dummy furzi

24
5

Since this has been answered somewhere else should I delete the question? Also thank you! – Truck aka Jimmy Jul 19 '23 at 19:59

HTML Searchbar's Styles Changing Onclick

1 Answers1