From 3e944548de3521f2d0085cbd0ff58e6118048fa8 Mon Sep 17 00:00:00 2001 From: Carl Worth Date: Sat, 16 May 2020 15:31:47 -0700 Subject: [PATCH] Add some basic styling for form input fields Compared to browser defaults this provides larger font sizes and a more modern flat aesthetic with a simple color scheme. --- style.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/style.css b/style.css index 4cb0b3f..c79ae7d 100644 --- a/style.css +++ b/style.css @@ -159,3 +159,53 @@ form { grid-column-end: span 2 } } + +/*\ +|*| +|*| Styling for form input fields +|*| +\*/ + +label { + font-size: 125%; +} + +input { + box-sizing: border-box; + font-size: 125%; + padding: 0.5em; + width: 100%; + border: 1px solid #287789; + border-radius: 4px; +} + +input:focus { + border: 2px solid #44c7ef; +} + +button { + display: inline-block; + border-radius: 4px; + background-color: #287789; + border: none; + color: white; + text-align: center; + font-size: 125%; + margin-top: .25em; + padding-top: 0.25em; + padding-bottom: 0.25em; + width: 200px; +} + +button:hover { + transform: translateY(-1px); + background-color: #44c7ef; +} + +:focus { + outline: none; +} + +::-moz-focus-inner { + border: 0; +} -- 2.43.0