Change search box input area color.

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