Border Box Color change, how?

Hi! Saw your post in the showing off thread, your site is looking very nice.

To set, or remove, the “glowing” effect of the input boxes & text area, set the outline property to either none (to remove) or to a different color:

input:focus, textarea:focus {
   outline: #13a89e auto 5px;
}

It’s not located in a style sheet. Instead, it is part of the brower’s style sheet. Each browser will have a local style sheet that’s used in case a web site doesn’t have a particular style defined.

Open up your site in Chrome, then right-click the input field below Nieuwsbrief and select Inspect element. Chrome’s DevTool window will open up, and the HTML for the input field will be highlighted on the left, with the CSS rules that affect the input field on the right. If you scroll down the right pane, you’ll see some gray areas with the heading user agent stylesheet. This means that these rules are defined in Chrome’s local stylesheet.

Now, scroll back up to the very top of that pane, and in the upper right corner, you’ll see a dotted box with an arrow pointing to it (the box will be to the right of a + sign). If you click on that dotted box, a dialog will drop down that allows you to set the “state” of the element that’s being inspected. Mark the box labeled :focus, and the first thing you’ll notice is that the input field now has the blue outline around it. Then, if you scroll down the right pane, you’ll see a rule that looks like this:

:focus {
outline: -webkit-focus-ring-color auto 5px;
}

What this rule says is to put an outline that is 5px wide, using the color of -webkit-focus-ring-color, on the web element which currently has the focus (-webkit-focus-ring-color is defined as #5B9DD9 in Chrome). It could be an input field, it could be a button, etc. Again, the location of this rule is user agent stylesheet, so it’s part of the browser’s (i.e., Chrome’s) default stylesheet, which is why you can’t find it in the Montezuma CSS files. Chrome, and other browsers, add this, or a similar rule, in order to make the control with the focus stand out.

Some developers feel that it is bad practice to remove the outline entirely, although substituting it with some other means is acceptable.

Any of Montezuma’s stylesheets will work, since the browser’s stylesheet is the first one that gets loaded, but various.css is a good place to put any overriding CSS since it’s the next to last one loaded.

Just tweak the above rule like this:

input:focus, textarea:focus {
   outline: #dddddd auto 5px;
}

#dddddd would be a light gray, #555555 would be a darker gray. As long as you use the same values for each pair of numbers, you’ll end up with any shade of gray between black (#000000) and white (#ffffff). #d3d3d3 would also be a gray color.