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?

[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.

[Antechinus]

Question: Do I just copy and paste it into the index.css? Sorry this coding is so dam foreign to me it's like walking around blind 

That's just an example of how you can do an alternative styling. It may not be exactly what you want for your theme though.

The main point is that you are talking about input elements in the focus state, and specifically about the outline property when inputs are focused (focused means you have clicked on it and your cursor is inside the input, waiting for you to type something). If you set input:focus {outline: none;} in the css for inputs, that will get rid of the blue. Just look for where it says input in your css.

It's still a good idea to give some visual indication of focus though, because a lot of users are used to getting a visual clue. That's why I used the box-shadow instead. You can use other things, like background colour or border colour. Suit yourself.

[MediaSVI]

It worked great and looks great thank you but what can I do about the blue around these bottons?

Question: Do I just copy and paste it into the index.css? Sorry this coding is so dam foreign to me it's like walking around blind 

That's just an example of how you can do an alternative styling. It may not be exactly what you want for your theme though.

The main point is that you are talking about input elements in the focus state, and specifically about the outline property when inputs are focused (focused means you have clicked on it and your cursor is inside the input, waiting for you to type something). If you set input:focus {outline: none;} in the css for inputs, that will get rid of the blue. Just look for where it says input in your css.

It's still a good idea to give some visual indication of focus though, because a lot of users are used to getting a visual clue. That's why I used the box-shadow instead. You can use other things, like background colur or border colour. Suit yourself.

[Antechinus]

Same thing, except that those are selects instead of being inputs. If you're also worried about textareas, you can hit all three at once.

Code Select Expand

input:focus, select:focus, textarea:focus {outline: none;}

[MediaSVI]

That did it! Thank you!