How to style the reactjs instantsearch icon-box

Open Q&A
#1

Hey there folks :slight_smile:
I am trying to style the reactjs search icon/button. pulled in by the CDN, almost there but I cannot figure out what selector to use in order to get rid of the button border that appears if I click on the search icon. anyone here who can tell me how I can make it transparent? I want to keep the search icon. Problem being I have made the icon larger so now the box that appears on click is cutting through the icon

thanks in advance
Linda

#2

Do you have a screenshot or preferably live site to show which button you mean?

#3

hey there @haroen unfortunately the box disappears when I go to take a screenshot so I cannot capture it but I fixed it by using height and width 0

.ais-SearchBox-reset {
-webkit-appearance: none;
appearance: none;
position: absolute;
z-index: 1;
width: 0;
height: 0;
top: 50%;
transform: translateY(-50%);
margin-right: 30px;
}
:slight_smile: this is probably not the right way to do it but none the less got rid of it visually
I also need to get rid of a black border that appears when I click inside the searchbox, also not visible on a screenshot so I’ve made a video-recording :slight_smile:
https://www.awesomescreenshot.com/video/2770063?key=0badd4feeb38bc21102fa828a6ceef41

I was also wondering how we change the filter items - please see screenshot attached. Usually these items are on the left side of the screen in the reactjs starter, I have just moved them to the top in stead. do we include the items we want in our json file? Or do we submit them somewhere on our dashboards?
thanks in advance
Linda

search-app-filter-items
search-app-filter-items1396×190 21.8 KB

#4

For the search box you can pass reset={null} like this:

Note that the reset button is quite useful for when people are expected to type multiple long queries after each other, so they don’t have to select all to delete it

#5

yes extremely useful so I sorted it out without actually taking away the function, just got rid of the box which then leaves the reset X untouched :slight_smile: so consider that done…I however cannot seem to be able to find the css selector which gives the search box a black border when I click into it? do you know what the right css selector is for this? I have made a recording so you are able to see what I mean
https://www.awesomescreenshot.com/video/2770063?key=0badd4feeb38bc21102fa828a6ceef41

#6

that would be the browser’s default outline. Be careful to still indicate focus in a different way, like I’ve done in this example using color:

.ais-SearchBox-input:focus {
  outline: none;
  border: 1px solid rgb(58, 69, 112);
}