diff --git a/modules/backend/formwidgets/taglist/partials/_taglist.htm b/modules/backend/formwidgets/taglist/partials/_taglist.htm
index 2e491c6dc..de6e000c7 100644
--- a/modules/backend/formwidgets/taglist/partials/_taglist.htm
+++ b/modules/backend/formwidgets/taglist/partials/_taglist.htm
@@ -3,20 +3,37 @@
     $availableOptions = $useKey ? $fieldOptions : array_unique(array_merge($selectedValues, $fieldOptions));
 ?>
 <!-- Tag List -->
-<select
-    id="<?= $field->getId() ?>"
-    name="<?= $field->getName() ?>[]"
-    class="form-control custom-select <?= !count($fieldOptions) ? 'select-no-dropdown' : '' ?> select-hide-selected"
-    <?php if (!empty($customSeparators)): ?>data-token-separators="<?= $customSeparators ?>"<?php endif ?>
-    <?php if (!empty($placeholder)): ?>data-placeholder="<?= e(trans($placeholder)) ?>"<?php endif ?>
-    multiple
-    <?= $field->getAttributes() ?>>
-    <?php foreach ($availableOptions as $key => $option): ?>
-        <?php if (!strlen($option)) continue ?>
-        <?php if ($useKey): ?>
-            <option value="<?= e($key) ?>" <?= in_array($key, $selectedValues) ? 'selected="selected"' : '' ?>><?= e(trans($option)) ?></option>
-        <?php else: ?>
-            <option value="<?= e($option) ?>" <?= in_array($option, $selectedValues) ? 'selected="selected"' : '' ?>><?= e(trans($option)) ?></option>
-        <?php endif ?>
-    <?php endforeach ?>
-</select>
+<?php if ($this->previewMode || $field->readOnly || $field->disabled): ?>
+    <ul class="form-control taglist--preview" <?= $field->readOnly || $field->disabled ? 'disabled="disabled"' : ''; ?>>
+        <?php foreach ($availableOptions as $key => $option): ?>
+            <?php if (!strlen($option)) continue ?>
+            <?php if (($useKey && in_array($key, $selectedValues)) || (!$useKey && in_array($option, $selectedValues))): ?>
+                <li class="taglist__item"><?= e(trans($option)) ?></li>
+            <?php endif ?>
+        <?php endforeach ?>
+    </ul>
+    <?php if ($field->readOnly): ?>
+        <input
+            type="hidden"
+            name="<?= $field->getName() ?>"
+            value="<?= $field->value ?>">
+    <?php endif ?>
+<?php else: ?>
+    <select
+        id="<?= $field->getId() ?>"
+        name="<?= $field->getName() ?>[]"
+        class="form-control custom-select <?= !count($fieldOptions) ? 'select-no-dropdown' : '' ?> select-hide-selected"
+        <?php if (!empty($customSeparators)): ?>data-token-separators="<?= $customSeparators ?>"<?php endif ?>
+        <?php if (!empty($placeholder)): ?>data-placeholder="<?= e(trans($placeholder)) ?>"<?php endif ?>
+        multiple
+        <?= $field->getAttributes() ?>>
+        <?php foreach ($availableOptions as $key => $option): ?>
+            <?php if (!strlen($option)) continue ?>
+            <?php if ($useKey): ?>
+                <option value="<?= e($key) ?>" <?= in_array($key, $selectedValues) ? 'selected="selected"' : '' ?>><?= e(trans($option)) ?></option>
+            <?php else: ?>
+                <option value="<?= e($option) ?>" <?= in_array($option, $selectedValues) ? 'selected="selected"' : '' ?>><?= e(trans($option)) ?></option>
+            <?php endif ?>
+        <?php endforeach ?>
+    </select>
+<?php endif ?>
diff --git a/modules/system/assets/ui/less/select.less b/modules/system/assets/ui/less/select.less
index fe595434a..3d7d86369 100644
--- a/modules/system/assets/ui/less/select.less
+++ b/modules/system/assets/ui/less/select.less
@@ -588,4 +588,4 @@
 
 .form-inline .select2-container--default {
     display: inline-block;
-}
\ No newline at end of file
+}
diff --git a/modules/system/assets/ui/less/taglist.less b/modules/system/assets/ui/less/taglist.less
new file mode 100644
index 000000000..da7621292
--- /dev/null
+++ b/modules/system/assets/ui/less/taglist.less
@@ -0,0 +1,28 @@
+//
+// Dependencies
+// --------------------------------------------------
+
+@import "global.variables.less";
+@import "select.variables.less";
+
+
+// Taglist preview mode
+//------------------------------------
+
+.taglist--preview {
+    overflow: hidden;
+    list-style-type: none;
+    padding-top: 0; padding-left: 0;
+    margin: 0;
+
+    .taglist__item {
+        color: @color-select-text;
+        background: @color-select-choice-bg;
+        border: 1px solid @color-select-choice-border;
+        border-radius: 4px;
+        cursor: default;
+        float: left;
+        margin: @padding-base-vertical 0 0 @padding-base-horizontal/2;
+        padding: 0 (@padding-base-vertical - 2);
+    }
+}
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
index 5ef4f1dee..e3e294e81 100644
--- a/modules/system/assets/ui/storm.css
+++ b/modules/system/assets/ui/storm.css
@@ -4877,6 +4877,8 @@ ul.autocomplete.dropdown-menu.inspector-autocomplete li a {padding:5px 12px;whit
 @-moz-keyframes popup-shake {10%,90% {-moz-transform:translate3d(-1px,0,0) }20%,80% {-moz-transform:translate3d(2px,0,0) }30%,50%,70% {-moz-transform:translate3d(-4px,0,0) }40%,60% {-moz-transform:translate3d(4px,0,0) }}
 @-webkit-keyframes popup-shake {10%,90% {-webkit-transform:translate3d(-1px,0,0) }20%,80% {-webkit-transform:translate3d(2px,0,0) }30%,50%,70% {-webkit-transform:translate3d(-4px,0,0) }40%,60% {-webkit-transform:translate3d(4px,0,0) }}
 @keyframes popup-shake {10%,90% {transform:translate3d(-1px,0,0) }20%,80% {transform:translate3d(2px,0,0) }30%,50%,70% {transform:translate3d(-4px,0,0) }40%,60% {transform:translate3d(4px,0,0) }}
+.taglist--preview {overflow:hidden;list-style-type:none;padding-top:0;padding-left:0;margin:0}
+.taglist--preview .taglist__item {color:#515c5d;background:#fff;border:1px solid #ccc;border-radius:4px;cursor:default;float:left;margin:8px 0 0 6.5px;padding:0 6px}
 .pika-single {display:block;position:relative;width:240px;padding:8px;color:#333;background:#fff}
 .pika-single.is-hidden {display:none}
 .pika-single.is-bound {position:absolute;box-shadow:0 5px 15px -5px rgba(0,0,0,0.5)}
diff --git a/modules/system/assets/ui/storm.less b/modules/system/assets/ui/storm.less
index 490f0e431..d2078bef0 100644
--- a/modules/system/assets/ui/storm.less
+++ b/modules/system/assets/ui/storm.less
@@ -1,5 +1,5 @@
 /*
-   __  _____ __  __  __ __    _____ __  __     
+   __  _____ __  __  __ __    _____ __  __
   /  \/   | /  \|__)|_ |__)  (_  | /  \|__)|\/|
   \__/\__ | \__/|__)|__| \   __) | \__/| \ |  |
 
@@ -31,4 +31,5 @@
 @import "less/popup.less";
 @import "less/checkbox.less";
 @import "less/select.less";
+@import "less/taglist.less";
 @import "less/datepicker.less";