4 ms·
You can have the best of both worlds (quick and dirty): http://jsfiddle.net/UMfAy/1/ http://jsfiddle.net/UMfAy/1/ <body> <form> <div class="co
by SeoxyS 14y ago
You can have the best of both worlds (quick and dirty):
http://jsfiddle.net/UMfAy/1/ http://jsfiddle.net/UMfAy/1/
<body>
<form>
<div class="cool-label">
<label for="name">name</label>
<input id="name" type="text" placeholder="John Doe" />
</div>
<div class="cool-label">
<label for="email">email</label>
<input id="email" type="text" placeholder="john@doe.com" />
</div>
</form>
</body>
body {
background: #eee;
}
form {
width: 250px;
margin: auto;
margin-top: 50px;
}
.cool-label {
border: 1px dotted rgba(0,0,0,.3);
background: #fff;
margin-bottom: 10px;
width: 100%;
}
.cool-label label {
width: 60px;
display: inline-block;
text-align: right;
float: left;
height: 100%;
margin-top: 5px;
}
.cool-label input {
border: none;
background: transparent;
width: 175px; /* 250-70-5 padding */
padding: 5px;
padding-left: 70px;
margin-left: -60px;
}
.cool-label input:focus {
background: rgba(0,130,255,.1);
outline: none;
}
- talmand 14y agoNice. But... You can use the labels themselves as the container for the inputs which leads to simpler markup by removing the divs. Not that it makes much difference in your example though.
- CCs 14y agohttp://jsfiddle.net/UMfAy/3/ http://jsfiddle.net/UMfAy/3/
- gbog 14y agoSorry but no. We are used to boxes surrounding actionable fields where we can type in content. Here your pseudo-fields is half editable, half not editable, which is weird. The "delimiting an active field" purpose of the visible box is broken. Maybe if you are Amazon or Google, you can try to implement such a thing, if you have strong reasons to believe it will help users. But if you are not Amazon or Google, you should avoid surprising your users with some weirdness, and just stick to proven UX.
- deleted 14y ago[deleted]
- firefoxman1 14y agotl;dr of this comment: "Don't try to innovate and move things forward yourself, only the big guys are allowed to do that"
- untog 14y agoPretty sure that UI concept is widely used. In fact, if your second paragraph had started "Maybe if you are Amazon, Google, or Apple"... http://km.support.apple.com/library/APPLE/APPLECARE_ALLGEOS/HT4061/HT4061_01-iphone-settings-003-en.png http://km.support.apple.com/library/APPLE/APPLECARE_ALLGEOS/... I think the iPhone counts as "proven UX".
- acqq 14y agoThe fields you present in the picture aren't editable?
- SoftwareMaven 14y agoIn that particular screen, no; but putting a row label inside the row is the standard method of building editable fields like that.
- untog 14y agoD'oh, you're right. I was looking for an image quickly. However, editable fields look exactly like that.