Das Problem beim Aufklappen ist, dass unten immer ein schwarzer Bereich übrigbleibt.
Der schwarze Bereich kommt von html - dem Element hast du aus irgendeinem Grund einen schwarzen Hintergrund und eine weiße Schriftfarbe spendiert.
Außerdem:
- Finger weg von position:absolute/relative, verwende (wie oben schon gesagt) grid oder flexbox
- die Textfelder sind bei mir nur schlecht als solche zu erkennen
- lass den reset-Button weg, er ist überflüssig - und ärgerlich wenn man versehentlich darauf kommt
- lass die Layouttabelle beim Geschlecht weg
- label-Elemente fehlen (zumindest funktionierende)
- bei Haar- und Augenfarbe fehlt "alle" o.ä.
- wenn du schon lange Erklärungen zur Bedienung schreiben musst (Cup-Feld) dann ist es schlecht bedienbar. Verwende eine Liste mit Checkboxen. Und: auf mobilen Geräten bekommt der User beim Klick auf das Select automatisch eine Liste von Checkboxen und kann die gewünschten auswählen
- vergiss Pixel als Einheit, sowohl als Breakpoint (in media-Querys) als auch als Schriftgröße sind sie ungeeignet
- wenn das Formular auf die gleiche Seite zeigen soll lass das action-Attribut einfach weg
- die font-awesome.min.css ist falsch eingebunden
- keine inline-Stylesheets, schreibe sämtliches CSS in die externe CSS-Datei
- es gibt keinen Grund Umlaute zu verstümmeln
- ein g-Element gibt es nicht