Add <select> element to style guide (#1819)

Related #131, part (h).
Stacked on #1813.

We didn’t have a `<select>` field in the style guide yet, and we also
were missing the general CSS for it. We’ll need this for [turning the
“Country Code” input field into a
select-field](#1820), as
[discussed in the previous
PR](#1813 (comment)).

Once we merged this into Pro, we can also refactor [the inlined CSS of
the `<select>` field in the static IP
dialog](https://github.com/tiny-pilot/tinypilot-pro/blob/f806639d5124e7edad8b9a44a727ecf49f73ed54/app/templates/custom-elements/static-ip-dialog.html#L38-L46).

<img width="840" alt="Screenshot 2024-07-05 at 08 34 39"
src="https://github.com/tiny-pilot/tinypilot/assets/83721279/c49b6a94-d114-495b-9dcb-ba32eb30029d">

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1819"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <[email protected]>

app/static/css/style.css

@@ -103,7 +103,8 @@ img {
 }
 
 input[type="text"],
-input[type="password"] {
+input[type="password"],
+select {
   padding: 0.4rem;
   font-family: inherit;
   font-size: inherit;
@@ -112,6 +113,10 @@ input[type="password"] {
   box-shadow: inset 0 0 0.2rem 0 rgba(0, 0, 0, 0.15);
 }
 
+select {
+  padding: 0.5rem;
+}
+
 input[type="text"].monospace,
 input[type="password"].monospace {
   font-family: "Overpass Mono", monospace;

app/templates/styleguide.html

@@ -308,6 +308,24 @@ <h2 class="section">Input</h2>
           spellcheck="false"
         />
       </p>
+      <h3 class="section">Select Field</h3>
+      <p>
+        For input fields that only allow for a certain, predefined set of values
+        or options, you can use a select field instead of a free text field.
+      </p>
+      <div>
+        <span>Choose Size:</span>
+        <select style="margin-left: 0.5em">
+          <option>Large</option>
+          <option>Medium</option>
+          <option>Small</option>
+        </select>
+      </div>
+      <p>
+        Unless there is a sensible default option, or for additional
+        clarification, you can use a disabled dummy option as first item to
+        imitate a placeholder text.
+      </p>
       <h3>Font Usage</h3>
       <p>
         Use the default font for input fields that expect “free” or regular