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.
Top comments (2)
Beautiful look here. Nicely done
Thank you!