We are working on a CSS framework for our app, having made the prototype with Twitter Bootstrap and we started by designing the elements of Bootstrap we had used.
One of them was prepended and appended inputs
Which is basically something that helps you recognize what the input is used for, it’s not necessarily a label, it’s rather some sort of helper. Say it’s an input with date, so you throw in there a little calendar icon.
Now I think that it’s kind of important for this element to be visibly part of the input, wouldn’t you say so?
Our graphic designer thinks otherwise, he’s basically done this
So, do you think it should be visibly part of the input? If so, what would be your arguments for it?
Bootstrap does the former, which should be a good hint. Just because the Bootstrap guys did it a certain way doesn’t make it right, but I bet they considered their options before doing it the way they did.
Personally, I think enclosing it gives the whole thing a better shape. If you’re stacking boxes, everything will align better and have a stronger vertical line.
How about a compromise? Maybe get rid of the gray background and/or gray out the non-editable text.
Source : Link , Question Author : fxck , Answer Author : Brendan