Post by BmthWebDesign » Thu May 02, 2013 7:43 pm

Hi,

Quick question, where can I find the css to change the text color from within the search box please?

I'm using this theme from template monster: http://www.templatemonster.com/demo/44022.html

Need to change it to white.

Thanks in advance.
Dave

Newbie

Posts

Joined
Thu May 02, 2013 7:40 pm

Post by BmthWebDesign » Thu May 02, 2013 8:15 pm

I have tried applying a class to the input field but, it's not working.

Newbie

Posts

Joined
Thu May 02, 2013 7:40 pm

Post by BmthWebDesign » Thu May 02, 2013 8:50 pm

Found the solution. For anyone else having these problems it's due to the placeholder text.

Here's what I did

HTML

Code: Select all

<input type="text" id="input-search" name="search" placeholder="Enter your search" value="<?php echo $search; ?>" />
CSS

Code: Select all

CSS
#input-search::-webkit-input-placeholder { /* WebKit browsers */
    color:#fff;
	font-size:14px;
}

#input-search:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#fff;
	font-size:14px;
}

#input-search::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#fff;
	font-size:14px;
}

#input-search:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#fff;
	font-size:14px;
}

Newbie

Posts

Joined
Thu May 02, 2013 7:40 pm

Post by butte » Wed May 08, 2013 2:05 am

Go ahead and mark the original title Solved.

Guru Member

Posts

Joined
Wed Mar 20, 2013 6:58 am

Post by TAC » Fri Nov 15, 2013 7:34 pm

I need to change my search box text colour as well.

I came upon this solution but, as I am not a coder, would it be possible to get some instructions as to exactly where to put this code?

Thanks :)

User avatar
TAC
Active Member

Posts

Joined
Sun Sep 26, 2010 1:33 am
Location - England

Post by butte » Sat Nov 16, 2013 12:22 am

TAC, in his the "color" is changed -- that is foreground color, such as text. If you want to change the text color just follow what he did.

If you want "background" or "background-color" changed, then just below the line for "color" add a line for each of those (so you'll see how they work). Then you can change both, and will probably want to do that (black on black, for example, doesn't work very well without SelectAll in the browser). You may need to find the css for both "input" and "search" in order to locate the box itself (just use ascii text editor's Find). The format is [attribute]: #[hexadecimal]; (with the : and the ;).

You can also add in-line style="[#color]; [#background-color]; [#background];" (so you'll see how that works) after <input type="text" id="input-search" name="search" but the css should do what you want.

Guru Member

Posts

Joined
Wed Mar 20, 2013 6:58 am

Post by TAC » Tue Nov 19, 2013 2:19 am

Thank you :)

I was still confused so just added to #header #search input {
color:#fff;
font-size:14px;

Seems to have worked, so far... :)

User avatar
TAC
Active Member

Posts

Joined
Sun Sep 26, 2010 1:33 am
Location - England

Post by butte » Tue Nov 19, 2013 2:27 am

In header change that #FFF; to #FFFFFF; when you have the chance, same color but bettered.

Guru Member

Posts

Joined
Wed Mar 20, 2013 6:58 am

Post by TAC » Tue Nov 19, 2013 2:44 am

I didn't realise that, I will do it now.
Thank you :)

User avatar
TAC
Active Member

Posts

Joined
Sun Sep 26, 2010 1:33 am
Location - England

Post by thesuperstar » Fri May 14, 2021 6:25 pm

Hi, here is the example:

Code: Select all

:-moz-placeholder {
    color: #444444;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #444444;
}

::-webkit-input-placeholder {
    color: #444444;
}

::-moz-placeholder {
    color: #444444;
    opacity: 1;
}

::-ms-input-placeholder {
    color: #444444;
}

::placeholder {
    color: #444444;
}

Newbie

Posts

Joined
Fri May 14, 2021 6:21 pm
Who is online

Users browsing this forum: No registered users and 25 guests