フォーカスされてなくてもinput:invalidは赤くした

Gurrium · Aug 25, 2022 · 9e76807 · 9e76807
1 parent 6da0baf
commit 9e76807
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -14,13 +14,13 @@
     })(window, document, 'script', 'dataLayer', 'GTM-MCR5HHZ');</script>
   <!-- End Google Tag Manager -->
 
-  <link href="style.css" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <!-- Pure.css -->
   <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css"
     integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
   <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css">
+  <link href="style.css" rel="stylesheet">
 
   <!-- Favicon -->
   <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">

diff --git a/style.css b/style.css
@@ -37,8 +37,11 @@ footer a {
     font-size: 100%;
 }
 
-#download-button {
-    margin: 0.5em 0;
+.pure-form input:invalid {
+    color: #b94a48;
+    border-color: #e9322d;
 }
 
-/* TODO: フォーカスされてなくてもinvalidなinputは赤くする */
+#download-button {
+    margin: 0.5em 0;
+}