diff --git a/chip-list.js b/chip-list.js
index b783a21..7bf7e08 100644
--- a/chip-list.js
+++ b/chip-list.js
@@ -39,6 +39,8 @@ class ChipList extends IgniteElement {
                 flex-direction: column;
                 justify-content: center;
                 flex: 1;
+                flex-basis: auto;
+                flex-shrink: 1;
             }
 
             mt-chip-list > .input-container > .input {
@@ -61,6 +63,7 @@ class ChipList extends IgniteElement {
             editing: false,
             input: null,
             searchBox: null,
+            search: true,
             searching: false,
             showSearchResults: true,
             searchResults: [
@@ -72,6 +75,8 @@ class ChipList extends IgniteElement {
             blurTimeout: null,
             documentListener: null,
             freeForm: true,
+            chipBackground: null,
+            chipColor: null
         };
     }
 
@@ -89,6 +94,8 @@ class ChipList extends IgniteElement {
                 new list(this.items, (item) => {
                     return new Chip()
                         .id(item.id)
+                        .property("color", this.chipColor)
+                        .property("background", this.chipBackground)
                         .property("onDelete", () => { this.items = this.items.filter(needle => needle != item); })
                         .child(item.content);
                 }),
@@ -133,7 +140,7 @@ class ChipList extends IgniteElement {
                                 }
 
                                 //If we are not searching and a key was pressed, open the search box.
-                                if (!this.searching && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 1)) && (this.items == null || this.items.length < this.itemsMax)) {
+                                if (!this.searching && this.search && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 1)) && (this.items == null || this.items.length < this.itemsMax)) {
                                     this.searching = true;
                                     this.showSearchResults = true;
                                 } else if (this.items != null && this.items.length >= this.itemsMax && e.key !== "Backspace") {
diff --git a/chip.js b/chip.js
index c541fdb..45b6ad9 100644
--- a/chip.js
+++ b/chip.js
@@ -1,5 +1,5 @@
 import { IgniteElement } from "../ignite-html/ignite-element.js";
-import { IgniteTemplate, slot, button } from "../ignite-html/ignite-template.js";
+import { IgniteTemplate, slot, button, span } from "../ignite-html/ignite-template.js";
 
 class Chip extends IgniteElement {
     constructor() {
@@ -8,7 +8,9 @@ class Chip extends IgniteElement {
 
     get properties() {
         return {
-            onDelete: () => { }
+            onDelete: () => { },
+            background: null,
+            color: null
         }
     }
 
@@ -22,17 +24,24 @@ class Chip extends IgniteElement {
                 padding-left: 0.6em;
                 padding-right: 0.6em;
             }
+
+            mt-chip:hover {
+                filter: brightness(0.9);
+            }
         `;
     }
 
     render() {
-        return this.template.child(
-            new slot(this),
-            new button()
-                .class("btn ml-1 p-0")
-                .child(`<i class="fad fa-times-circle"></i>`)
-                .onClick(() => this.onDelete())
-        );
+        return this.template
+            .style("background", this.background)
+            .style("color", this.color)
+            .child(
+                new slot(this),
+                new button()
+                    .class("btn ml-1 p-0")
+                    .child(`<i class="fad fa-times-circle" style="--fa-secondary-color: rgba(0,0,0,0.3); --fa-primary-color: rgba(0,0,0,0.5);"></i>`)
+                    .onClick(() => this.onDelete())
+            );
     }
 }