This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities
What I Built
This challenge is about spicing up some markup with styles.
I added a few things to the <select>-element:
<option value=“” selected disabled>…</option>
<hr>
</select>
Adding required will trigger the browsers built-in validation, and by setting the default <option> to selected disabled and with an empty value, we make sure that it’s selected by default, but not “re-selectable”.
Thus if you try to submit the form, you’ll submit an empty value for a required field, and trigger the validation.
The <hr> is a recent addition to <select>, allowing us to group stuff in a simpler and nicer way:
But let’s start with a CodePen demo, and then look into the CSS:
Demo
Journey
It’s a super-simple design. Both the <section>and the <form> are grids. I added a background-image to the <section> — and because text-on-images can be hard to read, I added text-shadow to the text.
I added text-wrap: pretty to the headline, and text-wrap: balance to labels. This is a relative new addition to CSS, and I love it! No more long-text-wraps-or-breaks woes.
The <select> looks funky in Safari, so I used appearance: none to style it. Unfortunately, the “drop-down-arrow” disappears when you remove the default styling, so I added my own: an SVG-icon as a url().
I did a small tool a while ago to help you convert SVG’s to url():
Finally, I added :focus-visible and :hover-styles, and a very basic JavaScript to handle submit.