Selected example looks more editable, selected has arrow

css/editable-css.css

@@ -27,6 +27,10 @@ pre[class*='language-'] {
     overflow: hidden;
 }
 
+.example-choice-list {
+    padding-right: 2em;
+}
+
 .example-choice-list,
 .output {
     height: 230px;
@@ -62,7 +66,7 @@ pre[class*='language-'] {
     background-color: #fff;
     width: 45%;
     overflow: hidden;
-    box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, .1);
+    box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, .2);
     padding: 1em;
 }
 
@@ -73,12 +77,14 @@ pre[class*='language-'] {
 
 .example-choice {
     position: relative;
+    z-index: 1;
     display: block;
     margin: .2em 0;
     width: 100%;
+    border: 1px solid transparent;
     font-size: 14px;
     cursor: pointer;
-    transition: background-color .2s ease-out;
+    transition: background-color .2s ease-out, border .2s ease-out;
 }
 
 .live .example-choice {
@@ -93,20 +99,36 @@ pre[class*='language-'] {
     background-color: #f5f5f5;
 }
 
-.example-choice {
-    border-left: 10px solid #9d9d9c;
+.example-choice:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: -10px;
+    z-index: 1;
+    opacity: 0;
+    transition: all .2s ease-out;
+    transform: translateY(-50%);
+    border-left: 10px solid #9b9b9b;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+}
+
+.example-choice.selected:before {
+    opacity: 1;
+    right: -1.5em;
+}
+
+.example-choice.invalid:before {
+    border-color: #f8b83e;
 }
 
 .example-choice.selected {
     background-color: #fff;
-    border-left-color: #4d9f0c;
+    border: 1px solid rgba(0, 0, 0, .2);
+    border-top: 1px solid rgba(0, 0, 0, .3);
+    border-bottom: 1px solid rgba(0, 0, 0, .1);
     box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, .2);
     cursor: text;
-    transition: background-color .2s ease-in;
-}
-
-.example-choice.invalid {
-    border-left: 10px solid #f8b83e;
 }
 
 .example-choice > code {
@@ -155,6 +177,15 @@ pre[class*='language-'] {
         height: auto;
     }
 
+    .example-choice-list {
+        padding-right: 1.5em;
+        margin-bottom: 1em;
+    }
+
+    .example-choice.selected:before {
+        transform: translateY(-50%) rotate(90deg);
+    }
+
     .output {
         position: relative;
         float: none;