Change search box input area color.

[MediaSVI]

I can't find were the code is in index.css, if that's were it is, to change the text box highlight color, it's the color that you get when you click in the text box.



Thank you for your time.

[Arantor]

I think that colour is set by the browser, not by any CSS that SMF has...

[mashby]

Code Select Expand

#search_form .input_text { background-color: #cccccc; }
Change the #cccccc to the hex color of your choice. I'm also assuming you're on 2.x.

[MediaSVI]

Yes I am using SMF 2.02 , I update my sig to reflect that. I could not find in index.css the code you offered?

Code Select Expand

#search_form .input_text { background-color: #cccccc; }
Change the #cccccc to the hex color of your choice. I'm also assuming you're on 2.x.

[mashby]

You just need to insert it. It doesn't exist. Add it at the top, bottom, middle, wherever you want.

[Arantor]

No, it's not the background colour that's being discussed here... it's the blue surround that's set on select which AFAIK is done in the browser and I think the code to change it is going to be similarly browser specific.

[Matthew K.]

mashby - he's wanting to remove the "blue outline" from around the field.  That outline is added to all inputs by Safari by default, it's not set in place by any SMF code.

Here's a way you can remove it.

Add this code to the bottom of your custom themes main CSS file.

Code Select Expand

input:focus {
outline: none;
}
You then would also be able to go another step, and change the colour by adding "border: 1px solid #hex;" to that CSS declaration which would mirror the same effect, in all browsers.

[mashby]

Oh, that's very controllable too if I read more carefully, eh?

#search_form .input_text {
    border: 2px solid #CCCCCC;
}

Changing the #CCCCCC to the hex color of your choice and this is new as well, not a find/replace. You could also specify other colors for focus, hover, etc.

[Matthew K.]

Oh, that's very controllable too if I read more carefully, eh?

#search_form .input_text {
    border: 2px solid #CCCCCC;
}

Changing the #CCCCCC to the hex color of your choice and this is new as well, not a find/replace. You could also specify other colors for focus, hover, etc.

Did you read what I said? I'm not trying to be rude...but I just explained why that border is showing up, it's not a CSS border attribute, it's an OUTLINE, which is specified by the browser - Safari, in this case. So it can ONLY be modified by changing input:focus and declaring the outline attribute value as "none;". You can THEN use a border, with a colour, to give the same effect globally (across browsers).

[mashby]

I'll just move on from this topic as I am clearly too stupid to be in here. That highlight isn't something I see in Firefox and I guess it's something Safari does. Thank you.

[Matthew K.]

I'll just move on from this topic as I am clearly too stupid to be in here. That highlight isn't something I see in Firefox and I guess it's something Safari does. Thank you.

That's exactly why I said, not to be rude, because I didn't want you to interpret my post as "are you stupid?".

[Antechinus]

It happens with Webkit and Opera, not with Gecko.

[Matthew K.]

There you have it

[Antechinus]

Opera and Chrome do it with a horrible sorta mustard yellow colour, while Safari does it with the lurid blue. Can't stand any of them myself.

[Matthew K.]

Opera and Chrome do it with a horrible sorta mustard yellow colour, while Safari does it with the lurid blue. Can't stand any of them myself.

Agreed - Safari has that kind of 'theme' though, so it fits their style, but it could use an update.

[Antechinus]

Well it's easy enough to sort with css anyway (once people know which attribute to target).

[Matthew K.]

Well it's easy enough to sort with css anyway (once people know which attribute to target).

Exactly.

[MediaSVI]

I was using chrome to take the pics and here is another one... man this is just a pain to get rid of all the blue but I am chugging along.

How do you get rid of the blue around these types of buttons?



Thanks for your time.

[Antechinus]

Anyway if the OP would like an example, this is from one of my themes. It gives a larger drop shadow on focus but without horrible coloured halos of poo.

Code Select Expand

input, button, textarea{
background: #fff; border: 1px solid #bbb; border-top: 1px solid #ccc; border-bottom: 1px solid #999; box-shadow: 0 2px 2px #ccc;
}

textarea:focus, input:focus {outline: none; box-shadow: 0px 3px 3px #777;}

That will deal with all of them. Try it.

[MediaSVI]

That worked great for the text boxes but what about this poo?