Use a label element rather than positioning hack

css/app.css

@@ -147,6 +147,7 @@ input[type=email] {
     background-color: white;
     border:1px solid #ccc;
     padding:5px 10px;
+    height:30px;
     width: 100%;
     border-radius:4px;
     -webkit-transition: all 100ms;
@@ -159,11 +160,6 @@ input:focus {
     background-color: #F1F1F1;
 }
 
-input[type=text] {
-    padding:5px 10px;
-    height:30px;
-}
-
 input.major {
     width: 100%;
     padding:5px 10px;
@@ -919,51 +915,47 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     background: #eef0ff;
 }
 
-.preset-field h4 .modified-icon {
+.preset-field .modified-icon {
     opacity: 0.2;
     display: none;
     pointer-events: all;
 }
-.preset-field h4 .modified-icon:hover {
+.preset-field .modified-icon:hover {
     opacity: 0.5;
 }
-.preset-field.modified h4 .modified-icon {
+.preset-field.modified .modified-icon {
     display: inline-block;
 }
 
-.preset-field h4[for*="input-"] {
+.preset-field .preset-label {
+    font-weight: bold;
     border: 1px solid #cfcfcf;
     padding: 5px 10px;
     background: #f6f6f6;
-    position: absolute;
-    left: 20px;
-    right: 20px;
+    display: block;
     border-radius: 4px 4px 0 0;
-    pointer-events: none;
-    z-index: 2;
 }
 
-.preset-field h4 + input,
-h4 + .input-wrap-position input,
-h4 + .preset-input input:first-child {
-    padding-top: 35px;
-    height: 60px;
+.preset-field > input,
+.preset-field > textarea,
+.preset-field .preset-input-wrap {
+    border: 1px solid #CCC;
+    border-top: 0;
+    border-radius: 0 0 4px 4px;
 }
 
-.preset-field h4 + textarea {
-    padding-top: 35px;
-    height: 100px;
+.preset-field textarea {
+    height: 65px;
 }
 
-.preset-field h4[for="input-building:levels"],
-.preset-field h4[for="input-ele"],
-.preset-field.checkselect h4 {
-    right: 50%;
+.preset-field-levels,
+.preset-field-elevation,
+.preset-field.checkselect {
+    width: 60%;
 }
 
-.preset-field-name h4 + input {
-    padding-top: 35px;
-    height: 70px;
+.preset-field-name input {
+    height: 35px;
     font-size: 18px;
     font-weight: bold;
 }
@@ -998,7 +990,6 @@ button.preset-add-field {
 
 input[type=number] {
     position: relative;
-    width: 50%;
     padding-right: 65px;
 }
 
@@ -1049,14 +1040,11 @@ input[type=number] {
 
 /* preset form checkbox */
 
-.checkselect label {
+.checkselect label:last-of-type {
     display: block;
-    padding: 35px 5px 5px 5px;
-    border-radius: 4px;
-    margin-right: 50%;
+    padding: 5px;
     box-sizing: border-box;
     color: #999;
-    border: 1px solid #CCC;
 }
 
 .checkselect label:hover {
@@ -1082,11 +1070,8 @@ input[type=number] {
 
 .radio-wrap {
     display: block;
-    padding: 30px 0 0 0;
-    border-radius: 4px;
     box-sizing: border-box;
     color: #999;
-    border: 1px solid #CCC;
     overflow: hidden;
 }
 
@@ -1108,12 +1093,12 @@ input[type=number] {
 /* Preset form address */
 
 .preset-field .addr-housename {
-    border-bottom: none;
-    border-radius: 4px 4px 0 0;
+    border: none;
 }
 
 .preset-field .addr-number {
     width: 20%;
+    border-left: none;
     border-right: none;
     border-bottom: none;
     border-radius: 0;
@@ -1121,11 +1106,15 @@ input[type=number] {
 
 .preset-field .addr-street {
     width: 80%;
-    border-radius: 0;
+    border-right: none;
     border-bottom: none;
+    border-radius: 0;
 }
 
 .preset-field .addr-city {
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
     border-radius: 0 0 4px 4px;
 }
 

js/id/ui/preset.js

@@ -68,15 +68,16 @@ iD.ui.preset = function(context, entity) {
                 return 'preset-field preset-field-' + field.id + ' fillL inspector-inner col12';
             });
 
-        sections.append('h4')
-            .attr('for', function(d) { return 'input-' + d.key; })
-            .text(function(d) { return d.label(); })
+        sections.append('label')
+            .attr('class', 'preset-label')
+            .attr('for', function(field) { return 'preset-input-' + field.id; })
+            .text(function(field) { return field.label(); })
             .append('button')
                 .attr('class', 'fr icon undo modified-icon')
-                .on('click', function(d) {
+                .on('click', function(field) {
                     var original = context.graph().base().entities[entity.id];
                     var t = {};
-                    (d.keys || [d.key]).forEach(function(key) {
+                    (field.keys || [field.key]).forEach(function(key) {
                         t[key] = original ? original.tags[key] : undefined;
                     });
                     event.change(t);
@@ -90,7 +91,7 @@ iD.ui.preset = function(context, entity) {
                 .on('close', event.close)
                 .on('change', event.change);
 
-            event.on('setTags.' + field.key || field.type, function (tags) {
+            event.on('setTags.' + field.id, function(tags) {
                 i.tags(_.clone(tags));
             });
 

js/id/ui/preset/address.js

@@ -41,15 +41,19 @@ iD.ui.preset.address = function(field, context) {
 
         function close() { return iD.behavior.accept().on('accept', event.close); }
 
-        housename = selection.append('input')
+        var wrap = selection.append('div')
+            .attr('class', 'preset-input-wrap');
+
+        housename = wrap.append('input')
             .property('type', 'text')
             .attr('placeholder', field.t('placeholders.housename'))
             .attr('class', 'addr-housename')
+            .attr('id', 'preset-input-' + field.id)
             .on('blur', change)
             .on('change', change)
             .call(close());
 
-        housenumber = selection.append('input')
+        housenumber = wrap.append('input')
             .property('type', 'text')
             .attr('placeholder', field.t('placeholders.number'))
             .attr('class', 'addr-number')
@@ -57,7 +61,7 @@ iD.ui.preset.address = function(field, context) {
             .on('change', change)
             .call(close());
 
-        var streetwrap = selection.append('span')
+        var streetwrap = wrap.append('span')
             .attr('class', 'input-wrap-position');
 
         street = streetwrap.append('input')
@@ -67,7 +71,7 @@ iD.ui.preset.address = function(field, context) {
             .on('blur', change)
             .on('change', change);
 
-        city = selection.append('input')
+        city = wrap.append('input')
             .property('type', 'text')
             .attr('placeholder', field.t('placeholders.city'))
             .attr('class', 'addr-city')

js/id/ui/preset/check.js

@@ -11,11 +11,13 @@ iD.ui.preset.check = function(field) {
 
         selection.classed('checkselect', 'true');
 
-        label = selection.append('label');
+        label = selection.append('label')
+            .attr('class', 'preset-input-wrap');
 
         box = label.append('input')
             .property('indeterminate', true)
-            .attr('type', 'checkbox');
+            .attr('type', 'checkbox')
+            .attr('id', 'preset-input-' + field.id);
 
         text = label.append('span')
             .text('unknown')

js/id/ui/preset/combo.js

@@ -1,21 +1,19 @@
 iD.ui.preset.combo = function(field) {
 
     var event = d3.dispatch('change', 'close'),
-        wrap,
         input;
 
     function combo(selection) {
+        var combobox = d3.combobox();
 
-        wrap = selection.append('span')
-            .attr('class', 'input-wrap-position');
-
-        input = wrap.append('input')
+        input = selection.append('input')
             .attr('type', 'text')
+            .attr('id', 'preset-input-' + field.id)
             .on('change', change)
             .on('blur', change);
 
-        var combobox = d3.combobox();
-        wrap.call(combobox);
+         selection
+            .call(combobox);
 
         if (field.options) {
             options(field.options);

js/id/ui/preset/defaultcheck.js

@@ -7,7 +7,7 @@ iD.ui.preset.defaultcheck = function(field) {
 
         input = selection.append('input')
             .attr('type', 'checkbox')
-            .attr('id', 'input-' + field.key)
+            .attr('id', 'preset-input-' + field.id)
             .on('change', function() {
                 var t = {};
                 t[field.key] = input.property('checked') ? field.value || 'yes' : undefined;

js/id/ui/preset/input.js

@@ -10,6 +10,7 @@ iD.ui.preset.url = function(field) {
     function i(selection) {
         input = selection.append('input')
             .attr('type', field.type)
+            .attr('id', 'preset-input-' + field.id)
             .attr('placeholder', field.placeholder || '')
             .on('blur', change)
             .on('change', change)

js/id/ui/preset/radio.js

@@ -6,18 +6,18 @@ iD.ui.preset.radio = function(field) {
     function radio(selection) {
         selection.classed('preset-radio', true);
 
-        var buttonwrap = selection.append('div').attr('class','radio-wrap');
+        var buttonwrap = selection.append('div')
+            .attr('class', 'preset-input-wrap radio-wrap');
 
         buttons = buttonwrap.selectAll('button')
             .data(field.keys || field.options)
             .enter()
             .append('button')
-                .text(function(d) { return field.t('options.' + d, { 'default': d }); })
-                .on('click', function() {
-                    buttons.classed('active', false);
-                    d3.select(this).classed('active', true);
-                    change();
-                });
+            .text(function(d) { return field.t('options.' + d, { 'default': d }); })
+            .on('click', function(d) {
+                buttons.classed('active', function(e) { return d === e; });
+                change();
+            });
 
         buttonwrap.append('button')
             .on('click', function() {

js/id/ui/preset/textarea.js

@@ -5,6 +5,7 @@ iD.ui.preset.textarea = function(field) {
 
     function i(selection) {
         input = selection.append('textarea')
+            .attr('id', 'preset-input-' + field.id)
             .attr('placeholder', field.placeholder || '')
             .attr('maxlength', 255)
             .on('blur', change)