Design nice tag input field

static/main.css

@@ -29,7 +29,7 @@ input {
 	border-radius: 5px;
 	color: #eee;
 	margin: 0;
-	padding: 1em;
+	padding: 5px;
 	vertical-align: middle;
 }
 
@@ -39,8 +39,34 @@ input {
 	margin-right: auto;
 }
 
-.editform input {
-	margin: 0.5em;
+.editform input, .tagcontainer {
+	margin: 5px;
+}
+
+.tagcontainer {
+	background-color: #666;
+	border: 1px solid #999;
+	border-radius: 5px;
+}
+
+.tags span {
+	background-color: #333;
+	border-radius: 2px;
+	font-size: 0.9em;
+	margin: 5px;
+	padding: 2px 5px 2px 5px;
+}
+
+.tags, .taginput {
+	display: inline-block;
+}
+
+.taginput {
+	background: none;
+	border: none;
+	border-radius: 0;
+	margin: 0 !important;
+	padding: 5px 5px 5px 0px;
 }
 
 .youtube label {
@@ -48,8 +74,8 @@ input {
 }
 
 nav {
-	text-align: center;
 	margin: 1em;
+	text-align: center;
 }
 
 nav > a {
@@ -136,4 +162,3 @@ nav .extra > a {
 .table-cell {
 	display: table-cell;
 }
-

templates/edit.html

@@ -10,7 +10,10 @@
 							<label for="tags">Tags</label>
 						</div>
 						<div class="table-cell">
-							<input type="input" name="tags" id="tags" />
+							<div class="tagcontainer">
+								<div class="tags"><span>Test</span></div>
+								<input class="taginput" type="input" name="tags" id="tags" />
+							</div>
 						</div>
 					</div>
 					<div class="table-row">