Change of search box color for darkmode?

  • Resolved qnkov

    (@qnkov)


    4 years, 5 months ago

    Hello there. My theme has dark mode. So i want when i click on it, my ajah search box to become black and the text white.

    https://prnt.sc/uxx7rq

    I’ve found the darkmode.css. For example, the theme search box looks like this:

    .darkmode .searchx #form #submit{color:#555}

    How can i put it for ajax search box?

    That’s my site – https://otaku.bg/otakubg/

    Thanks.

    • This topic was modified 4 years, 5 months ago by qnkov.
    • This topic was modified 4 years, 5 months ago by qnkov.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author wpdreams

    (@wpdreams)

    Hi,

    You can target the search form elements via these custom CSS rules, for example:

    /* Container */
.asl_m {
   background: #333333 !important;
   border: none !important;
}

/*Input field container*/
.asl_m .probox {
   background: #333333 !important;
   border: none !important;
}

/*Input*/
#ajaxsearchlite1 div.probox div.proinput input.orig {
    color: white !important;
}

    Best,
    Ernest M.

    Thread Starter qnkov

    (@qnkov)

    Hi,

    https://prnt.sc/uy1u62

    That’s what i’ve got using it like this:

    /* Container */
    .darkmode .asl_m {
    background: #17151b !important;
    }

    /*Input field container*/
    .darkmode .asl_m .probox {
    background: #17151b !important;
    }

    /*Input*/
    .darkmode #ajaxsearchlite1 div.probox div.proinput input.orig {
    color: red !important;
    }
    .darkmode div.asl_w .probox .promagnifier .innericon svg {
    fill: #555;
    }

    Looks like i will need the code for the text and the border.
    Trying to make it like this – https://prnt.sc/uy1ujy

    • This reply was modified 4 years, 5 months ago by qnkov.
    Plugin Author wpdreams

    (@wpdreams)

    Try something like:

    /* Container */
.darkmode .asl_m {
    background: #17151b !important;
    box-shadow: none !important;
}

/*Input field container*/
.darkmode .asl_m .probox {
    background: #17151b !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    border: 1px solid #555 !important;
}
.darkmode .asl_m .probox>div {
    box-shadow: none !important;
}

/*Input*/
.darkmode #ajaxsearchlite1 div.probox div.proinput input.orig {
    color: white !important;
}
.darkmode div.asl_w .probox .promagnifier .innericon svg {
    fill: #555;
}

.darkmode #ajaxsearchlite1 div.proinput input.orig::placeholder {
    color: white !important;
}

.darkmode #ajaxsearchlite1 div.proinput input.orig::-webkit-input-placeholder { /* Edge */
    color:  white !important;
}

.darkmode #ajaxsearchlite1 div.proinput input.orig:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:  white !important;
}
    Thread Starter qnkov

    (@qnkov)

    Thanks alot, u are god.

    Plugin Author wpdreams

    (@wpdreams)

    You are welcome! I will mark this topic as resolved.

    Please feel free to rate this plugin if you like it. Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change of search box color for darkmode?’ is closed to new replies.