How to style the search input in grid.js

JavaScript
1

I want to style the ugly search bar in grid.js (https://gridjs.io/) which I use to make a table.

URL: https://communitychessclub.com/examineGRID.php?player=capp


<div id="cccr"></div>

<script>
const grid = new gridjs.Grid({
    
 columns: [
 { id: 'game', name: 'Name', hidden: true}, 
 { id: 'Date', name: 'Date'}, 
 {...},
 {...}
 ],

I can’t use search: false, the URL parameter “player”
is passed to the page with php.
https://communitychessclub.com/examineGRID.php?player=capp

I want style the ugly search bar. Something inconspicuous like:
{height: 5px, background: inherit; color: #DEECFC; font-size: 3px}

Note that this needs a search feature, but the user doesn’t.

  
search: { 
keyword: "<?= $_GET['player'] ?>",
   selector: (cell,  rI, cellIndex ) => { if(cellIndex == 3 || cellIndex == 5) { return cell; } }
},

autoWidth: true, resizable: true, pagination: {limit: 10}, 
search: true, sort: true, fixedHeader: true, 
data: blah, blah, blah

}).render(document.getElementById("cccr"));

</script>

I tried to find the search bar id in Chrome with F12 and style that, no luck.
Also tried input[type=search] {/test/ background: #000;} again, no luck.

Anybody have any ideas?

2

Where are you putting this? (I dont see it on your linked page anywhere)

3 
I put it the <head>

<style>
input[type=search] {/*test* / background: #000;}
</style>
4

before or after the mermaid.css link? (Hint: That’s your problem. The mermaid.css file is overwriting your changes.)

5

You are right! I downloaded mermaid.css and edited it directly and things worked out fine. Thank you so much!

6

Try adding styles directly to the search element using CSS selectors. For example:

.gridjs-wrapper .gridjs-search input[type="search"] {
height: 5px;
background: inherit;
color: #DEECFC;
font-size: 3px;
}

This should apply styles to the search input field itself in your Grid.js table. If this doesn’t work, it’s possible that the styles are being overridden somewhere in your CSS or in the Grid.js styles. Then you’ll have to check exactly what styles are being applied and make changes accordingly.