diff --git a/curriculum/challenges/english/blocks/lecture-best-practices-for-styling-forms/672bca660aa9f9ce9b2b2787.md b/curriculum/challenges/english/blocks/lecture-best-practices-for-styling-forms/672bca660aa9f9ce9b2b2787.md
index 0790c75d48f..6757e2e1e51 100644
--- a/curriculum/challenges/english/blocks/lecture-best-practices-for-styling-forms/672bca660aa9f9ce9b2b2787.md
+++ b/curriculum/challenges/english/blocks/lecture-best-practices-for-styling-forms/672bca660aa9f9ce9b2b2787.md
@@ -5,14 +5,88 @@ challengeType: 19
 dashedName: what-are-common-issues-when-styling-special-input-elements
 ---
 
-# --description--
+# --interactive--
 
 Let's learn about some of the common issues when trying to style special input elements like the `datetime-local` and `color` inputs.
 
 These special types of inputs rely on complex pseudo-elements to create things like the date and color pickers. This presents a significant challenge for styling these inputs. One challenge is that the default styling is entirely browser-dependent, so the CSS you write to make the picker look the way intend may be entirely different on another browser. 
 
+Here is an example of a color input:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<form>
+  <label for="favorite-color">Pick your favorite color:</label>
+  <input type="color" id="favorite-color" name="favorite-color">
+</form>
+```
+
+```css
+input {
+  padding: 8px 12px;
+  margin: 8px 0;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+}
+
+input[type="color"] {
+  width: 60px;
+  height: 40px;
+  padding: 0;
+  border: 2px solid #555;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+```
+
+:::
+
 Another may be the complexity of the pseudo-element. Consider the date selector; there are a lot of moving parts here and the complex structure of the pseudo-element might pose a significant challenge in applying styling to the right areas.
 
+Here is an example of a date input:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<form>
+  <label for="birthdate">Select your birthdate:</label>
+  <input type="date" id="birthdate" name="birthdate">
+</form>
+```
+
+```css
+input {
+  padding: 8px 12px;
+  margin: 8px 0;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+}
+
+input[type="date"] {
+  padding: 6px 10px;
+  border: 2px solid #555;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator {
+  background-color: #4CAF50;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+```
+
+:::
+
 Of course, with these complex elements, you also run the risk of accidentally losing important functionality when you manually style them. Not only could you lose important indicators like the focus state or selected item but you could potentially break the selector entirely.  
 
 For these reasons many developers rely on JavaScript libraries or custom components entirely instead of using the browser's built-in components.