Search bar customizing

Site URL: https://caper-badger-3s6d.squarespace.com/blog

Hi! I would like to change my search bar. Right now I have a black bakground, but I still have the gray border-line and gray ''search'' text. Can this be removed? I also want the pop-up search result list to have a black background and other text color, with other border color (than gray). Can anyone help me?

Add to Design > Custom CSS

.sqs-search-ui-button-wrapper.color-dark .search-input {
    border-color: black;
    color: black !important;
    opacity: 1;
}
.sqs-search-ui-button-wrapper.color-dark .search-input::placeholder {
    color: white;
}

Is it possible to make the search bar a Gradient 

.sqs-search-bar {  background: linear-gradient(to right, #EF06C3, #0012FA );
  background: -webkit-linear-gradient(to right, #53d6ff, #666be1);
}  

Is it possible to fill in the search bar block with a gradient? 

Hi, I'm trying to get rid of the outline "on click" in my search bar, tried multiple codes, but noting seems to be working. Anyone knows, how to get rid of it? Thank you so much!

https://daffodil-goldfish-8xw8.squarespace.com/
Password: 120896

That worked perfectly, thank you. Can i change the default grey text and black text to white?

On 11/7/2022 at 12:38 AM, lucylou12 said:

Hi, I'm trying to get rid of the outline "on click" in my search bar, tried multiple codes, but noting seems to be working. Anyone knows, how to get rid of it? Thank you so much!

https://daffodil-goldfish-8xw8.squarespace.com/
Password: 120896

.search-input {
    outline-color: transparent !important;
}

Add to Design CSS

On 11/6/2022 at 4:49 PM, Cyperpunk-girl-333 said:

Is it possible to make the search bar a Gradient 

.sqs-search-bar {  background: linear-gradient(to right, #EF06C3, #0012FA );
  background: -webkit-linear-gradient(to right, #53d6ff, #666be1);
}  

 

Is it possible to fill in the search bar block with a gradient? 

@tuanphan

On 11/10/2022 at 5:28 PM, Cyperpunk-girl-333 said:

That worked perfectly, thank you. Can i change the default grey text and black text to white?

@tuanphan

On 11/10/2022 at 2:28 PM, Cyperpunk-girl-333 said:

That worked perfectly, thank you. Can i change the default grey text and black text to white?

For this?

Yes, that is correct ☺️

@tuanphan How would i make the text white?

On 12/29/2022 at 5:09 AM, Cyperpunk-girl-333 said:

@tuanphan How would i make the text white?

Use this CSS (Design > Custom CSS)

.sqs-search-ui-button-wrapper.color-dark .search-input {
    color: red !important;
}

the word search still appears grey but you can type white? do you know how to remove the word search?

13 hours ago, Cyperpunk-girl-333 said:

the word search still appears grey but you can type white? do you know how to remove the word search?

It looks fine to me