How to design edit version on a white background?

Question

I'm working on a user profile design for a website. The information (name, email, username, etc) is on a pure white background.

The type of edit feature I want to use involves clicking an edit button and the information is instantly changed to editable fields such as text areas. My problem is that I'm not sure how to style the editable fields. One method I have seen used is a white field on a darker background to give the appearance of the edit field being sunken into the page, but since my background is already white, that doesn't work. Dark styling makes it look like the fields are jumping off the page.

Are there any design styles I can use to make it plainly obvious that these fields are editable now?

Answer 1

welcome to UX stack exchange. I hope I understood the question.

You could use an off white background to the edit field and have a darker bottom border indicating the extent of the editable field. Or put a complete border round the field indicating the complete extent of the editable field.

Either way it would indicate that the field has changed from it's previous state.

Obviously you can vary the design, but the point is that by modifying all or part of the border you can still have a white or near-white background to the field and a white page background. Then you can further style the field with current focus by brightening the border colour, or adding a glow for example.

Examples:

Answer 2

Have you looked at the default styling? The default styling for the html input tag already indicates what fields are editable. For instance, in Chrome the default styling is: input { border-width: 2px; border-style: inset; } The blinking cursor and :focus pseudo-class default styling helps prompt the user to enter text.You can tab between text fields. :focus { outline: -webkit-focus-ring-color auto 5px; } If you don't like the defaults, then you may want to take a look at codrops as they show many examples of design effects for text inputs: https://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/