---
title: "Discussion on \"CSS :placeholder-shown class\" | Hashnode"
description: "Discussion on \"CSS :placeholder-shown class\". Hey everyone, let's talk about placeholders. The wonderful addition to form elements.\nToday we won't be talking about them as accessibility issues and hazards, but just on how to style the inputs that have them.\nIn CSS we can style the actual placeho..."
url: "https://hashnode.com/posts/css-placeholder-shown-class/5fbb3d1431929914d8ad6ba9"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [CSS :placeholder-shown class](https://h.daily-dev-tips.com/css-placeholder-shown-class?utm_source=hashnode&utm_medium=feed)

Hey everyone, let's talk about placeholders. The wonderful addition to form elements. Today we won't be talking about them as accessibility issues and hazards, but just on how to style the inputs that have them. In CSS we can style the actual placeho...

Nov 23, 2020 · 4 min read · h.daily-dev-tips.com  
Read the article

-   [#css](https://hashnode.com/tag/css)
-   [#css3](https://hashnode.com/tag/css3)
-   [#programming](https://hashnode.com/tag/programming)
-   [#2articles1week](https://hashnode.com/tag/2articles1week)
-   [#general-advice](https://hashnode.com/tag/general-advice)

## Written by

[Chris Bongers](https://hashnode.com/@dailydevtips)

@dailydevtips · Cape Town, SA

  
[View profile](https://hashnode.com/@dailydevtips)

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.

## Responses 2

Markdown supported · ⌘↵ to post

[Ricardo Luz](https://hashnode.com/@rxluz)

[Nov 23, 2020](https://hashnode.com/posts/css-placeholder-shown-class/5fbb3d1431929914d8ad6ba9/comment/5fbb4ae84609e7186f8559ed)

I never hear about this, quite useful for this option! I'll use in a future project for sure to highlight required fields without any JS.

[Chris Bongers](https://hashnode.com/@dailydevtips)

[Nov 23, 2020](https://hashnode.com/posts/css-placeholder-shown-class/5fbb3d1431929914d8ad6ba9/comment/5fbb4ae84609e7186f8559ed#reply-5fbb58434609e7186f855bc9)

Yeah I think nowadays if you don't have to support IE, you can make superb websites no-js required!

[Shad Mirza](https://hashnode.com/@iamshadmirza)

[Nov 23, 2020](https://hashnode.com/posts/css-placeholder-shown-class/5fbb3d1431929914d8ad6ba9/comment/5fbb47c4faba48183e280710)

Helpful tip. I wonder what could a real-world use-case of this 🤔?

[Chris Bongers](https://hashnode.com/@dailydevtips)

[Nov 23, 2020](https://hashnode.com/posts/css-placeholder-shown-class/5fbb3d1431929914d8ad6ba9/comment/5fbb47c4faba48183e280710#reply-5fbb4882faba48183e28073f)

Thanks, Mohd,

You could technically use it to showcase required fields that have no value.

Might not be enough in UX, but def a helpful argument. You could also do extensive extra css art if you're into that.

[Shad Mirza](https://hashnode.com/@iamshadmirza)

[Nov 23, 2020](https://hashnode.com/posts/css-placeholder-shown-class/5fbb3d1431929914d8ad6ba9/comment/5fbb47c4faba48183e280710#reply-5fbb49904609e7186f85599e)

[Chris Bongers](https://hashnode.com/@dailydevtips) Yess, definitely. Thanks