DEV Community

Cover image for Camping with HTML and CSS
Mads Stoumann
Mads Stoumann

Posted on

7 3 1 2 3

Camping with HTML and CSS

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>


Enter fullscreen mode Exit fullscreen mode

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:

hr

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
pathyatt profile image
Patrick Hyatt

Beautiful look here. Nicely done

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more