How can I use table CSS property all of my table except google custom search?

Question

I am creating a website and I used google custom search for it. When I trying to add a border for th, td they also applied for my GCSE. It looks ugly when it appears there. I am trying to figure out how can I use my CSS code all table except google custom search. Here is my website, https://vendabariulo.gov.bd/citizen-charter/

Here is my code,

th, td {
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}

Here is my search button screenshot, there shows a border around it. If I remove border from th, td it looks beautiful.

enter image description here

don't style tags, use a class instead – Facundo Corradini Aug 17 '18 at 22:08 — Facundo Corradini, Aug 17 '18 at 22:08
Thanks, but It is a WordPress site, how can I do that? – RanojitKumar Aug 17 '18 at 22:17 — RanojitKumar, Aug 17 '18 at 22:17

score 1 · Answer 1 · answered Aug 17 '18 at 22:28

1

You could try to style the Google Custom Search itself.

This rule might help you

gsc-search-box th, gsc-search-box td {
    /* apply your rules here as you like.
    For example, border:none; */
}

answered Aug 17 '18 at 22:28

Denys Xavier

36
1
4

Thanks, but I want to use my CSS rule for all table format except GCSE. Is there any way to do that? – RanojitKumar Aug 18 '18 at 03:07
@RanojitKumar, refer to my answer, is it what you want to achieve? – Houy Narun Aug 18 '18 at 04:05

score 1 · Accepted Answer · answered Aug 18 '18 at 03:52

1

Thanks all. After thinking and trying half an hour, I figure out something. It's work for me. I think it's a valid CSS rule.

I add a div class to my google custom search code and add this simple code,

.gcse td, th, tr {
border: none;
}

answered Aug 18 '18 at 03:52

RanojitKumar

11
5

score 0 · Answer 3 · answered Aug 18 '18 at 04:02

0

Use :not() CSS pseudo-class as doctrine in developer.mozilla.org

    table:not(table.gsc-search-box){ 

    /* your style definition */

        text-align: left;
        padding: 8px;
        border: 1px solid #ddd;

     }

Hope it helps.

answered Aug 18 '18 at 04:02

Houy Narun

1,557
5
37
86

How can I use table CSS property all of my table except google custom search?

3 Answers3