Adjust remove-button styling for single-select

and add an example.

Author: Pictor13

examples/plugins.html

@@ -31,6 +31,10 @@ <h2>Plugin: "remove_button"</h2>
 					<label for="input-tags2">Tags:</label>
 					<input type="text" disabled id="input-tags2" class="input-tags demo-default" value="awesome,neat">
 				</div>
+				<div class="control-group">
+					<label for="input-tags">Tags:</label>
+					<input type="text" id="input-tags3" class="input-tags2 demo-default" value="awesome">
+				</div>
 				<script>
 				$('.input-tags').selectize({
 					plugins: ['remove_button'],
@@ -45,6 +49,14 @@ <h2>Plugin: "remove_button"</h2>
 						return confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?');
 					}
 				});
+
+				// single selection
+				$('.input-tags2').selectize({
+					plugins: ['remove_button'],
+					persist: true,
+					create: true,
+					maxItems: 1
+				});
 				</script>
 			</div>
 

src/plugins/remove_button/plugin.js

@@ -18,15 +18,11 @@ Selectize.define('remove_button', function(options) {
 	options = $.extend({
 		label     : '×',
 		title     : 'Remove',
-		className : 'remove',
+		className : this.settings.mode === 'single' ? 'remove-single' : 'remove',
 		append    : true
 	}, options);
 
 	var self = this;
-	if (this.settings.mode === 'single') {
-		options.className = options.className || 'remove-single';
-	}
-
 	var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
 
 	/**

src/plugins/remove_button/plugin.less

@@ -34,10 +34,22 @@
 	.disabled [data-value] .remove {
 		border-left-color: lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
 	}
-	.remove-single {
+	[data-value] .remove-single {
 		position: absolute;
-		right: 0;
-		top: 0;
-		font-size: 23px;
+		right: @selectize-padding-x - 2px;
+		top: -1px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: @selectize-line-height;
+		color: lighten(@selectize-arrow-color, 30%);
+		text-shadow: 0 1px 0 rgba(0,0,0,0.1);
+		&:hover:not(:active) {
+			color: transparent;
+			text-shadow: 0 0 1px @selectize-arrow-color;
+		}
+		&:hover:active {
+			text-shadow: none;
+		}
 	}
 }