create searchfield

app/assets/javascripts/app/views/layout_ref/user_list.jst.eco

@@ -115,8 +115,9 @@
     </div>
   </div>
 
-  <div class="userSearch vertical center">
-    <input class="js-search form-control flex" name="search" placeholder="Search for users" type="search">
+  <div class="searchfield">
+    <svg class="icon icon-magnifier"><use xlink:href="#icon-magnifier" /></svg>
+    <input class="js-search form-control" name="search" placeholder="Search for users" type="search">
   </div>
 
   <div class="userSearch horizontal">

app/assets/stylesheets/bootstrap.css

@@ -125,13 +125,6 @@ button,
 select {
   text-transform: none;
 }
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  cursor: pointer;
-}
 button[disabled],
 html input[disabled] {
   cursor: default;
@@ -155,16 +148,7 @@ input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
-input[type="search"] {
-  -webkit-box-sizing: content-box;
-     -moz-box-sizing: content-box;
-          box-sizing: content-box;
-  -webkit-appearance: textfield;
-}
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
+
 fieldset {
   padding: .35em .625em .75em;
   margin: 0 2px;

app/assets/stylesheets/zammad.css.scss

@@ -254,15 +254,12 @@ span[data-tooltip]:hover:before {
   transition: transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s;
 }
 
-.textarea::-webkit-input-placeholder,
-.form-control::-webkit-input-placeholder,
-.token-input::-webkit-input-placeholder {    color: hsl(0,0%,80%); }
-.textarea::-moz-placeholder,
-.form-control::-moz-placeholder,
-.token-input::-moz-placeholder { opacity: 1; color: hsl(0,0%,80%); }
-.textarea:-ms-input-placeholder,
-.form-control:-ms-input-placeholder,
-.token-input:-ms-input-placeholder {         color: hsl(0,0%,80%); }
+.textarea::placeholder,
+.form-control::placeholder,
+.token-input::placeholder {
+  color: hsl(0,0%,80%);
+  opacity: 1;
+}
 
 .btn,
 .btn:hover,
@@ -899,6 +896,33 @@ textarea,
     font-size: 13px;
   }
 
+.searchfield {
+  position: relative;
+  margin-bottom: 20px;
+  
+  .icon {
+    left: 9px;
+    top: 6px;
+    width: 17px;
+    height: 17px;
+    position: absolute;
+    fill: hsl(60,1%,61%);
+  }
+
+  input[type=search] {
+    appearance: textfield;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 19px;
+    padding: 0 17px 0 34px;
+  }
+
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+}
+
 .content {
   overflow: auto;
   position: relative;
@@ -4454,10 +4478,6 @@ footer {
   vertical-align: bottom;
 }
 
-.userSearch {
-  margin-bottom: 20px;
-}
-
 .userSearch-label {
   margin: 10px 10px 0 0;
 }