color box checked

@@ -151,7 +151,7 @@
 
             <div class="attr-content clearfix">
                 {{# price}}
-                    <a class="attr {{#if checked}}checked{{/if}}" href="{{href}}">¥{{name}}</a>
+                    <a class="attr{{#if checked}} checked{{/if}}" href="{{href}}">¥{{name}}</a>
                 {{/ price}}
 
                 <div class="ud-price-range">
@@ -172,8 +172,14 @@
 
             <div class="attr-content clearfix">
                 {{# color}}
-                    <a class="attr {{#if checked}}checked{{/if}}" href="{{href}}">
-                        <i class="color-block" style="background: {{rgb}}"></i>
+                    <a class="attr{{#if checked}} checked{{/if}}" href="{{href}}">
+                        {{#if checked}}
+                            <span class="color-block">
+                                <i class="sub-color-block" style="background: {{rgb}}"></i>
+                            </span>
+                        {{^}}
+                            <i class="color-block" style="background: {{rgb}}"></i>
+                        {{/if}}
                         {{name}}
                     </a>
                 {{/ color}}

@@ -60,6 +60,19 @@
         margin-right: 0;
     }
 
+    .checked .color-block {
+        width: 16px;
+        height: 16px;
+        border: 2px solid #222;
+        padding: 2px;
+
+        .sub-color-block {
+            display: block;
+            width: 16px;
+            height: 16px;
+        }
+    }
+
     .checked-conditions {
         line-height: 30px;