text inputs

docs/index.html

@@ -47,7 +47,7 @@
           <label for="idk">Idk</label>
         </div>
 
-        <div class="field-row-stacked">
+        <div class="field-row-stacked" style="max-width: 160px">
           <label for="reason">Reason:</label>
           <select>
             <option>Nostalgia</option>
@@ -78,6 +78,14 @@
         </div>
       </fieldset>
 
+      <section>
+        <div class="field-row-stacked" style="max-width: 168px">
+          <label for="else">Anything else to add?</label>
+          <input type="text" id="else">
+          <textarea rows=8></textarea>
+        </div>
+      </section>
+
       <section class="field-row align-right">
         <button>OK</button>
         <button>Cancel</button>

style.css

@@ -291,23 +291,39 @@ input[type="checkbox"][disabled]:checked + label::after {
   background: url("./checkmark-disabled.svg");
 }
 
+input[type="text"],
+select,
+textarea {
+  padding: 3px 4px;
+  border: none;
+  box-shadow: var(--border-field);
+  background-color: var(--button-highlight);
+  box-sizing: border-box;
+}
+
+input[type="text"],
+select {
+  height: 21px;
+}
+
+input[type="text"] {
+  /* For some reason descenders are getting cut off without this */
+  line-height: 2;
+}
+
 select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  border: none;
   position: relative;
-  padding: 3px 4px;
-  box-shadow: var(--border-field);
-  max-width: 120px;
-  background-color: var(--button-highlight);
-  height: 21px;
   background-image: url("./dropdown-button.svg");
   background-position: top 2px right 2px;
   background-repeat: no-repeat;
 }
 
-select:focus {
+select:focus,
+input[type="text"]:focus,
+textarea:focus {
   outline: none;
 }