Visually hide an element with CSS

Categories


If you hide an element with display: none, it can also hide it from assistive technology, such as screen readers.

Using a visually hidden utility, you get the best of both worlds. A visually hidden element and assistive technology can still access it.

Code language
CSS
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

Comments

If you liked this post, you might like these ones, too

  1. Fluid typography with CSS clamp

    Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.

    Continue
  2. CSS Logical Properties

    Create spacing that works regardless of the direction of your content or the environment of your users.

    Continue

Become a supporter by joining the Piccalilli Membership

For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.