diff --git a/html/rendering/widgets/the-select-element/option-checked-styling-ref.html b/html/rendering/widgets/the-select-element/option-checked-styling-ref.html
new file mode 100644
index 00000000000000..1e7a097b305f1f
--- /dev/null
+++ b/html/rendering/widgets/the-select-element/option-checked-styling-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Input type=image with CSS content.</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+<style>
+  option {
+    color: black;
+  }
+  #option2 {
+    background-color: red;
+  }
+  #option1 {
+    background: green;
+  }
+</style>
+
+<select id=select size=3 multiple>
+  <option id=option1>Option #1 (should be green)</option>
+  <option id=option2>Option #2 (should be red)</option>
+</select>
diff --git a/html/rendering/widgets/the-select-element/option-checked-styling.html b/html/rendering/widgets/the-select-element/option-checked-styling.html
new file mode 100644
index 00000000000000..c705b99b2b4d9c
--- /dev/null
+++ b/html/rendering/widgets/the-select-element/option-checked-styling.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Input type=image with CSS content.</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help"  href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element">
+<link rel="match"  href="option-checked-styling-ref.html">
+
+<style>
+  option {
+    color: black;
+    background-color: red;
+  }
+  option:checked {
+    background: green;
+  }
+</style>
+
+<select id=select size=3 multiple>
+  <option id=option1 selected>Option #1 (should be green)</option>
+  <option id=option2>Option #2 (should be red)</option>
+</select>
