starting to refine preset styles.

css/app.css

@@ -130,6 +130,10 @@ a:hover {
     border:1px solid rgba(255, 255, 255, .5);
 }
 
+textarea  {
+    resize: vertical;
+}
+
 textarea,
 input[type=text],
 input[type=search],
@@ -139,31 +143,32 @@ input[type=tel],
 input[type=email] {
     background-color: white;
     border:1px solid #ccc;
-    padding:10px;
-    resize: vertical;
+    padding:5px 10px;
+    width: 100%;
+    border-radius:4px;
+    -webkit-transition: all 100ms;
+       -moz-transition: all 100ms;
+            transition: all 100ms;
 }
 
 textarea:focus,
-input[type=text]:focus {
-    background-color: #ececec;
+input:focus {
+    background-color: #F1F1F1;
 }
 
 input[type=text] {
     padding:5px 10px;
     height:30px;
-    resize: none;
 }
 
-input[type=text].major {
+input.major {
     width: 100%;
     padding:5px 10px;
     font-size: 18px;
     font-weight: bold;
     height:40px;
-    resize: none;
 }
 
-
 /* tables */
 
 table {
@@ -478,13 +483,16 @@ button[disabled] .label {
 .icon.zoom-in    { background-position: -240px 0px;}
 .icon.zoom-out   { background-position: -260px 0px;}
 .icon.plus       { background-position: -240px 0px;}
-.icon.geocode    { background-position: -280px 0px;}
+
+.icon.geocode    { background-position: -280px -20px;}
 .icon.layers     { background-position: -300px 0px;}
 .icon.avatar     { background-position: -320px 0px;}
 .icon.nearby     { background-position: -340px 0px;}
 .icon.geolocate  { background-position: -360px 0px;}
 .icon.warning    { background-position: -380px 0px;}
 
+.icon.search  { background-position: -280px 0px;}
+
 .icon.close-modal { background-position: -200px 0px;}
 
 .fillD .icon.avatar           { background-position: -320px -20px;}
@@ -565,6 +573,7 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 .inspector-inner {
     padding: 10px;
     border-bottom: 1px solid #ddd;
+    position: relative;
 }
 
 .inspector-inner.message {
@@ -585,7 +594,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 
 /* preset form */
 
-
 .inspector-body .name-help,
 .inspector-body .type-help {
   position: absolute;
@@ -606,13 +614,30 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 
 .preset-input { padding-left: 10px;}
 
-.preset-search-input {
-    width:100%;
+.preset-grid-search-wrap {
+    height: 60px;
 }
 
-.preset-search-input input {
-    width: 100%;
-    padding: 5px;
+.preset-grid-search-wrap .icon {
+    display: block;
+    position: absolute;
+    left: 10px;
+    top: 20px;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.preset-grid-search-wrap input {
+    left: 0px;
+    right: 0px;
+    top: 0;
+    bottom: 0;
+    border-radius: 0;
+    border: 0;
+    text-indent: 30px;
+    width: auto; height: auto;
+    position: absolute;
+    z-index: 1;
 }
 
 .preset-search-result {
@@ -632,10 +657,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     padding: 0 10px;
 }
 
-.preset-input input {
-    width: 100%;
-}
-
 div.combobox {
     width:155px;
     z-index: 9999;
@@ -743,22 +764,24 @@ div.combobox {
 
 .preset-input .addr-housename {
     border-bottom: none;
-    width:100%;
+    border-radius: 4px 4px 0 0;
 }
 
 .preset-input .addr-number {
     width: 20%;
     border-right: none;
     border-bottom: none;
+    border-radius: 0;
 }
 
 .preset-input .addr-street {
     width: 80%;
+    border-radius: 0;
     border-bottom: none;
 }
 
 .preset-input .addr-city {
-    width:100%;
+    border-radius: 0 0 4px 4px;
 }
 
 /* tag editor */
@@ -925,12 +948,6 @@ div.combobox {
   top: 80%;
 }
 
-.preset-grid-search {
-  width: 100%;
-  height: 20px;
-}
-
-
 /* Preset icon colors */
 
 .preset-icon-fill.tag-shop,

css/reset.css

@@ -117,9 +117,9 @@ input[type="radio"] {
 
 input[type="search"] {
     -webkit-appearance: textfield; /* 1 */
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box; /* 2 */
-    box-sizing: content-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box; /* 2 */
+    box-sizing: border-box;
 }
 
 /*

img/source/sprite.svg

@@ -39,8 +39,8 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="1"
-     inkscape:cx="70.692872"
-     inkscape:cy="47.524828"
+     inkscape:cx="307.92385"
+     inkscape:cy="182.74459"
      inkscape:document-units="px"
      inkscape:current-layer="layer12"
      showgrid="false"
@@ -579,7 +579,7 @@
          inkscape:export-ydpi="90" />
     </g>
     <path
-       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
        d="m 313.5,3.00001 c -3.03757,0 -5.5,2.46243 -5.5,5.5 0,3.03757 2.46243,5.5 5.5,5.5 1.00612,0 1.93866,-0.27827 2.75,-0.75 l 3.75,3.75 1,0 1,-1 0,-1 -3.75,-3.75 c 0.47173,-0.81134 0.75,-1.74387 0.75,-2.75 0,-3.03757 -2.46243,-5.5 -5.5,-5.5 z m -0.5,2 1,0 2,1 1,2 0,1 -1,2 -2,1 -1,0 -2,-1 -1,-2 0,-1 1,-2 2,-1 z"
        id="path3048-0-7-5-6"
        inkscape:connector-curvature="0" />

js/id/ui/preset_grid.js

@@ -23,8 +23,11 @@ iD.ui.PresetGrid = function(context) {
             .attr('class', 'preset-grid fillD inspector-body inspector-body-' + entity.geometry(context.graph()))
             .call(drawGrid, context.presets().defaults(entity, 12));
 
+        searchwrap.append('span').attr('class', 'icon search');
+
         var search = searchwrap.append('input')
-            .attr('class', 'preset-grid-search')
+            .attr('class', 'preset-grid-search major')
+            .attr('placeholder','Search')
             .attr('type', 'search')
             .one('keydown', function() {
                 // hack to let delete shortcut work when search is autofocused