bug(search): remove native date field clear button

zalando · Jan 23, 2017 · e33142a · e33142a
1 parent 1d401e1
commit e33142a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/docs/demo/materials/04-molecules/05-search-form.html b/docs/demo/materials/04-molecules/05-search-form.html
@@ -31,3 +31,11 @@
         {{/each}}
     </ul>
 </div>
+
+<label for="searchWithDate" class="dc-label">Search box using date field</label>
+<div class="dc-search-form">
+    <input class="dc-input dc-search-form__input" id="searchWithDate" type="date" placeholder="Search...">
+    <button class="dc-btn dc-search-form__btn">
+        <i id="searchWithDate" class="dc-icon dc-icon--search dc-icon--interactive"></i>
+    </button>
+</div>
diff --git a/src/styles/molecules/_search-form.scss b/src/styles/molecules/_search-form.scss
@@ -15,10 +15,14 @@
 }
 
 @mixin dc-search-form__input {
+    max-height: 36px;
     margin: 0;
     padding-right: 30px;
     -moz-appearance: none;
     -webkit-appearance: none;
+
+    &[type="date"]::-webkit-clear-button { display: none; }
+    &[type="date"]::-ms-clear { display: none; }
 }
 
 @mixin dc-search-form__btn {