About the “Ugly page”: The way it looks is decided by two separate but connected things,
1// Your CSS styling (which looks OK — you might separate them visually a bit more (e.g., give each separate result a distinct background with body.search-result article {background-color: rgba(50,255,50,.2); padding: 1em 2em; padding-bottom:2em;}). So you can work with that if needed.
2// Your (child?) theme’s templates, here probably the “category.php” template, or “archive.php” or more specific (you can test it, e.g. by adding a different nonsense class to the <body> in all the possible candidates, then look at the HTML output and see which nonsense class was used). Because at there you can choose whatever attribute of the results you want to show (now, title+excerpt) — the Featured Image, the post_date, the last_updated timestamp, its tags and categories, its rating or whatever custom taxonomy you’ve applied to it. And the order (by ID, by title, by post_date; ASCending or DESCending order; … ). And also the pagination settings!
HOWEVER, I understood you didn’t want the results to appear at all — basically “make that first option inactive”. That’s why I suggested in my first post, if no selection is made then use that ‘nothing was selected’ option to link back to this search page itself — so the visitor feels nothing has happened (while actually it did, but the outcome is the same as they started from).
But maybe I misunderstand and/or there’s a further issue?