Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Douglas Christman
Douglas Christman
10,045 Points

:focus Consistency across browsers

Hi all -

I submitted Project 3 on HTML forms and got my feedback today. I understood most of the suggestions, but I can't figure this one out.

"Reviewer Comments:

The focus state on the text inputs and textareas have to be modified so that they stay consistent and clear across browsers."

This is the CSS I have for :focus

input:focus {
    outline-color: #00b8d4;
}

1 Answer

John Halbert
John Halbert
12,922 Points

I think we'll need your entire project to give an evaluation. Off the top of my head, though:

"The focus state on the text inputs and textareas have to be modified so that they stay consistent and clear across browsers."

Perhaps user-agent stylesheets on other browsers were modifying the elements in some other way, giving inconsistent results on other browsers you didn't test on? Did you test on other browsers?

Douglas Christman
Douglas Christman
10,045 Points

<p>Thanks for your response John. I guess what I was seeing was the default browser style in chrome and safari. Nothing appeared when I tried it in firefox.</p>

<p>Simple fix with </p>

input:focus, 
textarea:focus {
    background-color: #fdf697;
    border: 4px solid #00b8d4;
}