[css-forms-1] Define ::color-swatch pseudo element

Author: lukewarlow

css-forms-1/Overview.bs

@@ -252,7 +252,7 @@ Markup Shorthands: css yes, markdown yes
       </tr>
       <tr>
         <td>`<input type=color>`</td>
-        <td></td>
+        <td>''::color-swatch''</td>
       </tr>
       <tr>
         <td>`<select>`</td>
@@ -497,6 +497,16 @@ Markup Shorthands: css yes, markdown yes
     ```
   </div>
 
+## Color Swatch: the ''::color-swatch'' pseudo-element ## {#color-swatch-pseudo}
+
+	The <dfn>::color-swatch</dfn> pseudo-element represents the portion of the control that displays the chosen color value.
+
+  <div class="example" id="color-swatch-example">
+    For example, the following example should make the input and its color swatch rounded:
+
+    <pre class="lang-css">input[type=color], ::color-swatch { border-radius: 9999px; }</pre>
+  </div>
+
 ## Compatibility With Vendor Pseudo-Element Extensions ## {#vendor-pseudo-element-compatibility}
 
   When possible, the user agent should use aliasing to implement any non-standard pseudo-elements.