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:

<select required>
  <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.