Changing Textcolor of Visual Composers 'Search Form'

[nilje]

Hi, this may be an easy one but I don’t get it to work. How can change the textcolor of the placeholder of ‘Search Form’ in Visual composer? (but just of that, not sitewide) Asked already Visual composer Support, they say that:

“Hi, you can use Custom CSS to overwrite this element if there is extra class name available for this element. Search form is not default VC element and seems to be added by your WP theme author so I would recommend getting more information from theme author on this one as well.”

Thanks!

[Radu]

Hi,

After you add a search form module from visual composer, add a class for example mycustomclass

If you want to add another name to that class don’t forgot to rename class from mycustomclass with your class in CSS.

COPY CODE

.kleo-search-form.mycusomclass input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    red !important;
}

.kleo-search-form.mycusomclass input::-moz-placeholder {
    /* FF 4-18 */
    color: red;
}
.kleo-search-form.mycusomclass input::-moz-placeholder {
    /* FF 19+ */
    color:: red;
}
.kleo-search-form.mycusomclass input:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}

Add this css to kleo-child/style.css or in Theme Options -> General Settings -> Quick CSS

Regards

RAdu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[nilje]

perfect, thanks!!!

[elis]

hi,
trying to apply the solution you offered to change the search form placeholder color on my home page, but nothing changes, tried to find the placeholder in the theme files, but couldn’t find it anywhere.everything is still the same. i have already changed the color of the input text without any problems.
hope to find a solution.

thank you,
regards, eli.

[Radu]

Hi elis,

Can you please provide your website url ?

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[elis]

This reply has been set as private.

[Radu]

Hi,

Please add this css to wp-admin -> theme options -> general settings -> quick css

COPY CODE

body.home input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { color:red !important;}
body.home .kleo-search-form #searchform input.input-lg { color:red !important; }

Let me know if is ok

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[elis]

hi radu,
thank’s for your replay, unfortunately it didn’t help.
the code you suggest is for changing the color of the input text, which i already managed to change.
the only thing i can’t change is the color of the placeholder text.
any other ideas how to do it?

thank’s
regards, eli.

[Radu]

Hi,

Try with this CSS

COPY CODE

.kleo-search-form.search-style-default #searchform .input-lg::-webkit-input-placeholder {
   color: red !important;
}

.kleo-search-form.search-style-default #searchform .input-lg:-moz-placeholder { /* Firefox 18- */
   color: red !important;  
}

.kleo-search-form.search-style-default #searchform .input-lg::-moz-placeholder {  /* Firefox 19+ */
   color: red !important;  
}

.kleo-search-form.search-style-default #searchform .input-lg:-ms-input-placeholder {  
   color: red !important;  
}

Replace red with your desired color

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[elis]

it work’s!!!
great thank you very much radu

[Author]

Posts