css remove safari select style

Custom Select Styles with Pure CSS

Posted on : Aug 15, 2020 Written by Stephanie Eckles

Modern CSS gives us a range of properties to achieve custom select styles that have a near-identical initial appearance for single, multiple, and disabled select elements across the top browsers.

A few properties and techniques our solution will use:

• clip-path to create the custom dropdown arrow
• CSS grid layout to align the native select and arrow
• custom CSS variables for flexible styling
• em units for relative sizing

Now available : my egghead video course Accessible Cross-Browser CSS Form Styling . You'll learn to take the techniques described in this tutorial to the next level by creating a themable form design system to extend across your projects.

Common Issues with Native Selects

As with all form field types, <select> varies across browsers in its initial appearance.

From left to right, here is the initial appearance for <select> in Firefox, Chrome, and Safari:

The differences include box size, font-size, line-height, and most standout is the difference in how the dropdown indicator is styled.

Our goal is to create the same initial appearance across these browsers, inclusive of multiple selects, and disabled states.

Note: The dropdown list is still not stylable, so once the <select> is opened, it will still pick up the individual browser's styles for the option list. This is ok - we can deal with that to retain the free accessibility of a native select!

We'll focus on a single <select> to begin.

The label is not part of our styling exercise, but its included as a general requirement, notably with the for attribute having the value of the id on the <select> .

To accomplish our custom styles, we've wrapped the native select in an extra div with class of select for simplicity in this tutorial.

Reset and Remove Inherited Styles

As is included in all my tutorials as a modern best practice, we add the following reset first:

Following that, we can begin the rule for the native select and apply the following to rest its appearance:

While most of those are likely familiar, the oddball out is appearance . This is an infrequently used property and you'll note that it is not quite where we'd like it for support , but what it's primarily providing for us in this instance is the removal of the native browser dropdown arrow.

Note: The CodePen is set up to use autoprefixer which will add required pre-fixed versions of the appearance property. You may need to specifically set this up for your project, or manually add them. My HTML / Sass Jumpstart includes autoprefixer as part of the production build.

The good news is, we can add one more rule to gain removal of the arrow for lower IE versions if you need it:

This tip found in the excellent article from Filament Group that shows an alternate method to create select styles .

The last part is to remove the default outline . Don't worry - we'll add a replacement later on for the :focus state!

And here's a gif of our progress. You can see there is now zero visual indication that this is a select prior to clicking on it:

Custom Select Box Styles

First, let's set up some CSS variables. This will allow our select to be flexibly re-colored such as to represent an error state.

Accessibility note : As a user interface element, the select border must have a 3:1 contrast or greater against the surrounding surface color.

Now it's time to create the custom select styles which we will apply to the our wrapping div.select :

First, we set up some width constraints. The min-width and max-width values are mostly for this demo, and you may choose to drop or alter it for your use case.

Then we apply some box model properties, including border , border-radius , and padding . Note the use of the em unit which will keep these properties proportional to the set font-size .

In the reset styles, we set several properties to inherit , so here we define those, including font-size , cursor , and line-height .

Finally, we supply it background properties, including a gradient for the slightest bit of dimension. If you remove the background properties, the select will be transparent and pick up the page background. This may be desirable, however, be aware and test the effects on contrast.

Join my newsletter for article updates, CSS tips, and front-end resources!

Don’t fill this out if you're human:

Custom Select Dropdown Arrow

For our dropdown arrow, we are going to use one of the most exciting modern CSS properties: clip-path .

Clip paths let us make all kind of shapes by "clipping" the otherwise square and rectangle shapes we receive as defaults from most elements. I had fun using clip-path on my recent portfolio site redesign .

Prior to clip-path having better support, alternative methods included:

• background-image - typically a png, slightly more modern would be an SVG
• an inline SVG as an additional element
• the border trick to create a triangle

SVG may feel like the optimal solution, however when used as a background-image it loses the ability to act like an icon in the sense of not being able to alter its properties such as fill color without redefining it entirely. This means we cannot use our CSS custom variable.

Placing an SVG inline solves the fill color issue, however it means including one more element every time a <select> is defined.

With clip-path , we get a crisp, scalable arrow "graphic" that feels like an SVG but with the benefits of being able to use our custom variable and being contained in the style vs. the HTML markup.

To create the arrow, we will define it as an ::after pseudo-element.

The clip-path syntax is a little strange, and since it's not really the focus of this article, I recommend the following resources:

• Colby Fayock explans the syntax with an example in this egghead video
• Clippy is an online tool that allows you to select a shape and adjust the points while dynamically generating the clip-path CSS

If you're following along, you may have noticed the arrow is not appearing despite defining width and height . When inspected, its found that the ::after is not actually being allowed it's width.

We will resolve this by updating our .select to use CSS grid layout.

This lets the arrow appear by essentially extending it a display value akin to "block".

At this stage we can verify that we have indeed created a triangle.

To fix the alignment, we'll use my favorite CSS grid hack (old hat to you if you've read a few articles around here!).

Old CSS solution: position: absolute New CSS solution: A single grid-template-areas to contain them all

First we'll define our area, then define that the select and the ::after both use it. The name is scoped to the element its created for, and we'll keep it easy by calling it "select":

Which gives us an overlap of the arrow above the native select due to stacking context via source order:

We can now use grid properties to finalize the alignment of each element:

:focus State

Oh yeah - remember how we removed the outline ? We need to resolve the missing :focus state from dropping that.

There is an upcoming property we could use called :focus-within but it's still best to include a polyfill for it at this time.

For this tutorial, we'll use an alternate method that achieves the same result, just a bit heftier.

Unfortunately, this means we need to add one more element into the DOM.

After the native select element, as the last child within .select , add:

Why after? Because since this is a pure CSS solution, placing it after the native select means we can alter it when the select is focused by use of the adjacent sibling selector - + .

This allows us to create the following rule:

You may be wondering why we're back to position: absolute after just learning the previous grid-area hack.

The reason is to avoid recalculating adjustments based on padding. If you try it on your own, you'll see that even setting width and height to 100% still makes it sit within the padding.

The job position: absolute does best is matching the size of an element. We're pulling it an extra pixel in each direction to make sure it overlaps the border property.

But, we need to make one more addition to .select to ensure that it's relative to our select by - well, position: relative .

And here's our custom select all together as seen in Chrome:

Multiple Select

Selects come in a second flavor, which allows a user to select more than one option. From the HTML perspective, this simply means add the multiple attribute, but we'll also add a class to help create style adjustments called select--multiple :

And looking at it, we can see it's inherited most of our styles favorably, except we don't need the arrow in this view.

This is a quick fix to adjust our selector that defines the arrow. We use :not() to exclude our newly defined class:

We have a couple of minor adjustments to make for the multiple select, the first is removing padding that was previously added to make room for the arrow:

By default, options with a long value will overflow visible area and be clipped, but I found that the main browsers allow the wrapping to be overridden if you desire:

Optionally, we can set a height on the select to bring a bit more reliable cross-browser behavior. Through testing this, I learned that Chrome and Firefox will show a partial option, but Safari will completely hide an option that is not able to be fully in view.

The height must be set directly on the native select. Given our other styles, the value 6rem will be able to show 3 options:

At this point, due to current browser support, we have made as much adjustments as we are able.

The :selected state of the options is fairly customizable in Chrome, somewhat in Firefox, and not at all in Safari. See the CodePen demo for a section that can be uncommented to preview this.

:disabled Styles

While I would advocate for simply not showing disabled controls, we should prepare the styles for that state just to cover our bases.

To emphasis the disabled state, we want to apply a greyed background. But since we've set background styles on .select and there isn't a :parent selector, we need to create one last class to handle for this state:

Here we've updated the cursor as an extra hint that the field cannot be interacted with, and updated the background values we previously set to be white to now be more grey for the disabled state.

This results in the following appearances:

You can test it for yourself, but here's a preview of the full solution across (from left) the Firefox, Chrome, and Safari:

Controls the level of style and functionality of the site, a lower fidelity meaning less bandwidth, battery, and CPU usage. Learn more .

Custom Style Sheets in Safari

I first heard mention of adding a custom style sheet in Safari a couple months back. I honestly can’t remember where I saw it but I was reading something and, in passing, the author mentioned the idea of hiding the right sidebar on Twitter using a custom style sheet in Safari. This thing:

It’s funny how you sometimes miss the entire point of someone’s writing and selectively remember what you want, in this case “hey, I can hide that dumb module on Twitter with little effort?” I’d like to say that I have the self-discipline to avoid clicking on anything in that module, but unfortunately I am not that strong of a person. Sometimes I just get bored and something there makes me think “oh, hmm, I wonder...” and then I click it. It’s one of those things where, if it wasn’t there, it wouldn’t be a problem. Like keeping cookies right next to your desk. But it’s frictionless and easy and RIGHT THERE that I succumb. But I digress. My weaknesses are not on trial in this post.

The thought hit me: “hey I should hide that right sidebar on twitter.com using a custom style sheet in Safari!” So I did. And then I moved on with life. I never thought to write a post about it because, you know, custom style sheets in a browser? That’s old news.

But then, I recently found this post published in November of 2020 about customizing your browsing experience using custom style sheets and thought “I guess this isn’t old news just quite yet.” Plus I’m trying to write a lot more this year , so here we are.

Note: it’s worth mentioning that hiding the right sidebar in twitter isn’t a novel idea. Craig Hockenberry created a Safari extension that’ll do it for you called “Fixerrific”. Granted, like my custom style sheet, this removes the entire right sidebar, including the search box which you might actually find useful. That said, you can still access the search functionality on twitter by going to the Explore tab.

How I Did It

First off, Safari lets you specify a custom style sheet.

In case you don’t know, a custom style sheet is a bunch of CSS rules that you get to specify and then the browser will apply them to every single web page you visit .

The first thing I needed to do was open twitter.com and find out what type of CSS rule I could write to target that right sidebar. I can tell you, it wasn’t easy. Twitter has a bunch of generated classes names, which I’m assuming are quite dynamic, so finding a rule that would target the right sidebar and not change in the near future seemed like it might be tough. But then I found it: a DOM node which encompassed the entire right sidebar that had a very specific attribute data-testid="sidebarColumn" .

I can’t say for sure, but that looks like one of those attributes the QA team appends to certain elements they want to find with their automated browser tests. The whole purpose of those kinds of attributes is so the engineers won’t touch them and change their names, that way the automated tests can run for a long time without breaking. Again, I can’t make any guarantees, but this selector will probably be around for a while. So I felt pretty confident I could use that selector and not have it break in a short period of time due to twitter refactoring their DOM markup.

Once I had a selector I could use, I opened my text editor and created the following CSS file:

From there, I saved the .css file in my Dropbox folder (for backup purposes, i.e. a lazy man’s version control) then opened Safari’s preferences and selected my newly created file. A restart of Safari and boom! The sidebar was gone.

Feeling emboldened and empowered with my CSS sword of righteousness, I figured I’d go ahead and get rid of the DM/chat widget thing twitter recently introduced. It was merely visual noise to me. And fortunately, it had a similar way to be targeted: [data-testid="DMDrawer"] .

Pretty cool. Now I have a version of twitter custom tailored to me, free of a lot of distractions I don’t want to see.

Observations Nobody Asked For

If you write a lot of custom styles for sites across the web, you could start running into naming collisions. It would be neat if you could scope styles to a specific domain. Maybe there’s a way to do it? I couldn’t think of one. Imagine:

JavaScript has access to a page’s URL via window.location but AFAIK that’s not available—at least not in any standardized way—in CSS.

It's likely a terrible idea, but we have custom user style sheets, is there such a thing as a custom user scripts? Imagine giving a .js file to the browser and it runs it on every single page, like a custom style sheet. Why? Because I want to specify all my custom styles using JavaScript not CSS.

Just kidding.

But seriously, if there was something like this, I could have a script that runs on every page and sticks an attribute on the root html element with the page’s URL. Imagine:

This would result in every page getting an attribute on the root element with the current page’s href on it.

This would allow me to scope every single one of my custom style sheet selectors to a specific domain:

Honestly, that sounds cool but impractical (not to mention the incredible security implications). It’s fun to think about though.

But hey, if I felt like disabling JavaScript, I could use this theoretical custom script functionality to run the following JavaScript on ever page I visit, just to show who really is in power:

I love old-school browser functionality like this. Can you imagine a feature like custom style sheets being proposed and implemented in today’s world? I feel like this is in Safari as a holdover from a bygone era. Could it ever get the momentum to happen today? I worry Apple might take it out sometime in the future.

All that said, if you want to read more, this post has a perspective on the history of custom style sheets in Safari that you might find interesting.

Update: 2020-01-14

I received an email from John P. Rouillard who read my question about having custom user scripts and said “You mean like greasemonkey or tapermonkey?”

I realized when I wrote that paragraph that I was merely describing what browser extensions are for. What I was trying to get at is that it would be really cool if custom user scripts were a feature of the browser, i.e. adding a custom user script was as simple as adding a custom style sheet: select a .js file on disk and boom, you’re done.

That said, maybe I’ll give one of these user scripts extensions a try. I’ve heard of greasemonkey and used it back in like 2012. But I’ve never heard of tampermonkey. Looks like it’s open source and even available for Safari . Thanks John!

Turning off web-kit dropdown styling in safari

I was reading about how you can turn off the gel-box styling of safari’s dropdowns with the code -webkit-appearance:none;

But it hasn’t worked. Its possible I am embedding it wrong as I’m no code expert… which is why Im using webflow I guess !

See below for the culprit in question.

I want to turn off all styling, as I have styled a div underneath it to match how I want the form to look. You can view Contact Semasio on chrome for a reference on what I’m after.

Here is my site Read-Only: https://preview.webflow.com/preview/semasio?preview=a4c19a8b6f78f2fefbfff25a84e7ed5f

Yeah this is a common problem. You’ll need to add custom code to get this working for all browsers consistently.

Need a WordPress expert help?

Meet me on upwork, remove default button and form styling on safari / ios.

Last Updated: June 28, 2020 | Reading Time: < 1 minute

By default, Safari styles any form field on the webpage to use their own settings. Here’s a short CSS to remove default style:

Looking for an affordable WordPress solution?

We offer budget-friendly wordpress website development services to meet your needs. prices start at $10., related posts, how to create hover zoom effect on elementor, integrating cloudflare turnstile with gravity forms, how to setup email forwarding with cloudflare, how to read linux partition on windows 11 for free, one response.

• Pingback: Lights Out! - Overengineering a Dark mode - The web development company

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed .

© 2024 pupungbp.com | Jagoanwp.com

Nikita Hlopov

Frontend Dev Blog

Select tag custom styles with CSS only

The select tag is one of the most confusing and hard to style form elements in HTML. Luckily there is a simple and cross-browser consistent solution to give custom styles for select tag using only CSS.

The problem with styling select tag

The css solution, final result, the future of select tag styling.

select is one of those HTML tags that have different appearances across browsers.

That’s the main reason why developers applying custom styles for select tag. A study has shown that the select tag is the number one form control developers are creating a custom style for. The same study shows that the reasons for custom styling select tag in the first place are:

• Browser inconsistencies;
• Couldn’t change the appearance sufficiently.

To apply custom style for a select tag, you’ll need the CSS only approach, no additional HTML, or JavaScript.

That means that native behavior and accessibility are preserved and less code is used which is good.

Let’s take the basic select tag markup.

As for the CSS, we’ll reset basic styles first.

💡 NOTE: The appearance rule will remove the dropdown arrow. However, it is not supported by the IE browser.

If you need to reset default styling for the IE browser, add the following rule:

Source: StackOverflow.com

Now that we’ve removed the default dropdown arrow, we can add a custom one. It can be achieved via an encoded background SVG image .

This solution is cross-browser-friendly. And since it’s SVG you can further customize it if needed.

Next, let’s add styles for pseudo-classes :hover and :focus . For the :focus state we’ll add the box-shadow property and remove the default outline , now that we have rounded corners.

To finalize let’s add custom styles for the select disabled state.

With custom styles applied for the select tag it will look consistent and more appealing across different browsers:

If you wish to handle long text overflowing your select tag, check out my article where I explain how to handle such case.

The final result with all the code is available on CodePen:

See the Pen Custom styled select tag by Nikita Hlopov ( @nikitahl ) on CodePen .

Currently, there’s an online initiative called Open UI to standardize UI components on the web such as the select tag . 

The purpose of Open UI to the web platform is to allow web developers to style and extend built-in web UI controls, such as select dropdowns, checkboxes, radio buttons, and date/color pickers.

This means that this organization is working toward a unifying standard of styling select and other form tags and components for that matter (so no hacks and pain). Stephanie Stimac talks about Standardizing select: What the future holds for HTML Controls in more detail at the FrontCon 2020 conference.

But as of the time this article is published the Open UI is in the infancy stage, as they call it. Hopefully in the near-future web developers will have the ability to give custom styles to all form elements with ease.

Slider Revolution

More than just a WordPress slider

Awesome CSS Select Styles You Can Use Right Now

Enhance your forms with css select styles learn to customize dropdowns with creative examples for a seamless and stylish user interface..

Imagine you’re painting, but your canvas is a website, and your brushes, a cascade of code known as CSS. In this digital artistry, the strokes you choose – let’s call them  CSS select styles  – define the visual feast your audience will experience. It’s the magic behind the curtain, pulling elements together, adding a dash of color here, a sprinkle of layout there.

Here’s the scoop: by the end of our chat, you’re going to be wielding CSS selectors with the finesse of a maestro.  CSS Select Styles  are the secret sauce to not just making your site  work , but making it  pop .

Think of them as the VIPs in the world of  web design , waving their all-access passes, grabbing elements by the ID, cozying up with classes, and telling them how to strut their stuff on the digital runway.

Get ready to wrap your head around examples that breathe life into lifeless tags.

We’ll dive into everything from  class selectors  and  ID selectors  to those fancy  pseudo-classes  that wait in the shadows until just the right moment.

By the article’s end? You’ll be translating your wildest design fantasies into reality, one selector at a time.

Custom Select Field Styling with Only CSS

Designed by: Stephanie Eckles

This is a demo showing how to make a cross-browser custom-styled select box .

SELECT right-arrow with CSS

Designed by: Veiko

Select elements do not permit pseudo-classes. Arrow.png doesn’t seem to be a good solution either. This is a CSS solution with a “linear background.”

Custom Select Menu

Designed by: Wallace Erick

This select box uses CSS for restyling as well as JavaScript for menus UX configuration. These kinds of boxes behave a little differently than regular HTML selects and some find them more agreeable to use.

It is a good option for those who are looking for fresh and clean select menus that work well.

Magic with details // CSS Only Dropdown

Designed by: Steffen

Design visually attractive and high-performing websites without writing a line of code

WoW your clients by creating innovative and response-boosting websites fast with no coding experience. Slider Revolution makes it possible for you to have a rush of clients coming to you for trendy website designs.

pure css select with colorable svg arrow

Designed by: Jan Wagner

Dropdown Menu

Designed by: Mostafa

This select uses a plain black and white color scheme and subtle colors. JavaScripts is utilized to move the menu in and out of view .

This is done by targeting a hidden input field that displays the same behavior as a select field. This solution doesn’t in reality use the <select> element which allows you to pull data from the frontend into your forms.

Full CSS stylized select V2

Designed by: Vincent Durand

Custom Select Wrapper

Designed by: Matheus Sales

This select can be used for contact structures . You can use it as a model and if you have an online store, you can set the alternative as “Credit card” or “Cash on delivery,” etc.

uSwitch pure CSS select control v1.0

Designed by: Craig Morey

This select doesn’t use JS or external images . It only uses one style sheet. It attempts to be an elegant, pure CSS-styled scalable select box with minimal extra HTML . It can be used for cross-browser/platform use.

css select style

Designed by: uixcrazy.com

Custom Select Box Dropdown Styling

Designed by: FrankieDoodie

This is a custom select box dropdown styling. It was made with HTML and CSS .

Pure CSS select dropdown styling

Designed by: Justin Danks

Pure CSS select dropdown

Designed by: Robin Garbe

Custom dropdown

Designed by: Silver Drop

As its description suggests, this set of select menus tries to make HTML dropdowns not suck. Each box is a different size and there are buttons enabling you to change colors at any time.

It is possible to remove that feature if you only want to use one scheme that works best for your site. 

The bottom line is that these select menus work perfectly fine and are pleasant to use. 

Pure CSS Select Box With Direction Aware Hover Effect

Designed by: Himalaya Sing

This CSS select box comes with a drift impact and is visually very pleasing. The options in the drop-down menu have different colors . There is a catch here and there in the container. 

Select Box with Placeholder [CSS Only]

Designed by: James Nowland

The creator of this select menu wanted to remove the default from the selection options . This makes it behave similar to a placeholder in text fields. It is visible when the field is blank and disappears when you input a value. 

This select menu is fully compliant and works with the actual HTML element. The user never sees the “select an option” text in the drop-down menu since an option field is hidden by default whenever the user makes a selection.

Pure CSS Select Box

Designed by: Veniamin

This CSS select box doesn’t use JavaScript and a native element . The CSS structure is fantastic and boasts a descending bolt to give a user a selection of choices.

Flat selectbox

Designed by: Peter Geller

This flat select menu is a good example showing that looks and aesthetics matter in web design. 

It behaves just like a regular select menu and the drop-down part has not been changed. However, the way the select itself was restyled makes the page more exciting . It is much classier than the unattractive browser default select box.

Custom Select an Option

Designed by: Dany Santos

This custom select was designed to change the traditional style of the select in browsers. JS is used to display the list when a user clicks on it, and SCSS to style it . The Attribute selected works well.

Material Design Select Dropdown

Designed by: Sam Murphey

This select drop-down menu was created with CSS, HTML, and JavaScript .

CSS Review: Select Box

Designed by: Steven Estrella (sgestrella)

This common select box can be styled with CSS while retaining accessibility.

Select Option Interaction

Designed by: Bhakti Al Akbar

This is a nice example of clean animation . It was built with TweenMax GSAP.

Designed by: Mina Nabil (mnainnovix)

This is a pure CSS select box that doesn’t use any JavaScript . It utilizes a direction-aware hover effect . When a user hovers over an option, the motion of the icon inside the option is determined by the direction of the hover (up or down).

CSS styled and filterable select dropdown

Designed by: Mari Johannessen

This select drop-down menu was styled utilizing CSS, HTML, and vanilla JS . It uses an input field to grab the value from the dropdown list.

Designed by: Danny Dorstijn (Lightningstorms)

This is a CSS select box created without JavaScript and a native element .

Pretty Select dropdown

Designed by: j0be

This select box relies primarily on CSS while still using inputs to maintain the form submission variables.

CodePen Home

Designed by: Alex

This is an example of a creative way to style CSS select drop-down menus using only CSS .

Pure CSS Select Box Styling

Designed by: Anselm Urban (a-urban)

This is CSS select box styling in pure CSS . Works fine in every modern browser. 

Customize the <select> element with CSS

Designed by: Mike Mai

This demo shows a way to take full control of the element and customize it to your preference .

Custom <select>

Designed by: Christophe CORBALAN

This CSS select box stands out due to a design comprising an orange background with a white box in the center.

CSS / select with SVG arrow as background image

Designed by: henning fischer

Material design select

Designed by: LukyVJ

CSS only Select

Designed by: Nicolas Udy

Many common CSS select menus conceal when you click anywhere else on the page. This one does not do that. It drops down with full movement impacts and stays open until you click on the menu again .

It is a good example of a select menu with a clean structure and basic liveliness.

Pure CSS select option

Designed by: Anna Blok

CSS3 Card Deck Drop Down

Designed by: Tibor katelbach

This is an example of a UI concept using a gradient grey background . The title is big-size and is placed in the center of the page. CSS3 is in bold. It is easy to set global variables using the Toggler Click handler. 

Pure CSS Select

Designed by: Raúl Barrera

Custom Select

Designed by: Yusuf

This is a very basic custom CSS select .

CSS only Select ( radio + checkbox ) No JS

Designed by: Aron

This is a CSS select box with an eye-catching blue and pink background . There is a big arrow and text at the top and three boxes with the word “Choose” inside. When you click on it, the drop-down selection appears. Each option is highlighted when you hover over it. 

This is a CSS select design that makes the content of the drop-down menu stand out using a black background.

Simple custom select

Designed by: Alessandro Falchi

Selectionator

Designed by: Benjamin

This is a very interesting concept of a multi-select widget .

FAQs about CSS select styles

What exactly are css select styles.

CSS Select Styles are your handy tools in selecting HTML elements to apply styles. Think of them as a designated GPS for every style rule, leading them to the precise location – whether that’s one element, a group, or a dynamic state like hover. It’s precision in the web styling game.

How do I use Class and ID Selectors?

Class selectors are your go-to for grouping, styling multiple elements with a  .classname , while ID selectors are like your web’s unique social security number, with a  #idname , used once per page. Mix and match, but remember: IDs are one of a kind in the CSS nightclub.

Can you style multiple elements at once?

Absolutely. With  CSS selectors  like class, you can target multiple elements with the same style. Use a comma to separate different selectors, and voila! Uniformity across your elements. It’s like a style flash mob where everyone knows the moves.

What are Pseudo-classes in CSS?

Pseudo-classes are the secret handshakes of CSS. They apply styles to elements in special states – think  :hover , when your cursor plays tag, or  :focus , when a form input is in the spotlight. They’re those intuitive cues that make your site feel alive.

How does CSS specificity impact style application?

CSS specificity is the bouncer deciding which styles get VIP access to an element. It’s a hierarchy that compares selectors; with ID worth more than class, and class more than element tag. Think of it like the pecking order in a chicken coop – it determines who rules the roost.

Are there universal selectors in CSS?

Universal selectors are the all-you-can-eat buffet of the CSS world. By using  * , you declare a style democracy, applying your rules to every element without discrimination. It’s a broad stroke that says, “Everyone gets a piece of the style pie.”

How do CSS selectors improve web accessibility?

Select wisely, and your website will not only look good but also be inclusive. Use selectors that enhance semantic markup – like focusing on form inputs for keyboard navigation.  Accessibility standards , here we come!

How do Attribute Selectors work?

Need a Swiss Army knife in your arsenal? Attribute selectors are it. They match elements based on attribute presence or value –  [type="text"] , for example. Like a detective, they find the clues within the tags and apply styles accordingly.

What’s the role of Pseudo-elements in CSS?

Pseudo-elements are the stage crew of the CSS theater, creating extra flair without extra HTML. With  ::before  and  ::after , you can insert content before or after an element, dress up bullet points, or add decorative elements. It’s adding sparkle without the clutter.

How important are CSS Select Styles for responsive design?

In the responsive design saga,  CSS Select Styles  are your heroes. They adapt with  media queries , making sure your site is as comfortable on mobile as it is on desktop.  Responsive web design  hinges on selectors that can dance to the beat of any device’s drum.

So, we’ve just had a nice little deep dive into the ocean of  CSS select styles examples , right? We’ve seen the ropes – class selectors teaming up, ID selectors taking the solo path, and those extra cool pseudo-classes and elements bringing a dash of magic.

It’s like having a wardrobe full of outfits at your disposal. Every HTML element can slip into something comfy for, say, a mobile screen, or dress to the nines with a hover effect for desktop viewers. And aren’t those  media queries  like weather forecasts? Making sure everything looks good come rain or shine.

Now, you’ve got the toolbox, the blueprint, and that touch of flair. It’s showtime! Mix and match those selectors to create your web masterpiece. Keep it simple, keep it accessible, and most importantly, keep it fun.

Whether you’re a rookie getting your hands dirty or a pro tuning your guitar, these  CSS select styles examples  are your stepping stones to build web pages that not only work like a dream but look like one too.

If you liked this article about CSS select styles, you should check out this article about  CSS progress bars .

There are also similar articles discussing  CSS loaders ,  CSS login forms ,  CSS background patterns , and  CSS image effects .

And let’s not forget about articles on  CSS dropdown menus ,  CSS border animations ,  CSS arrows , and  CSS cards .

FREE: Your Go-To Guide For Creating Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

Slider Revolution high priest on the mission to find the line between not enough coffee and just a little too much coffee. Same with beer.

For any inquiries or additional resources related to this blog post or else, please don't hesitate to comment below or email me at [email protected] .

Liked this Post? Please Share it!

2 thoughts on “ Awesome CSS Select Styles You Can Use Right Now ”

Thanks. it helped a lot

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

From The Blog

Top wordpress ecommerce plugins for online success, boost conversions: the best wordpress landing page plugins, enhance your website: top javascript slider libraries, popular resources, optimizing load speed and performance, quick setup – slider revolution, create a basic responsive slider, get productive fast.

Join over 35.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.

Privacy Overview

How TO - Custom Select Box

Learn how to create custom select boxes with CSS and JavaScript.

Custom Select Box

Try it Yourself »

Create a Custom Select Menu

Step 1) add html:, step 2) add css:.

Advertisement

Step 3) Add JavaScript:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

Say Hello to selectmenu, a Fully Style-able select Element

I want to introduce you to a new, experimental form control called <selectmenu> . We’ll get deep into it, including how much easier it is to style than a traditional <select> element . But first, let’s fill in some context about why something like <selectmenu> is needed in the first place, as it’s still evolving and in development.

Ask any web developer what they think is missing from the web platform today, chances are the ability to style form controls will be on their list. In fact, form styling was voted as one of the top-10 missing things in the State of CSS Survey in 2020 . It was then further surveyed by Greg Whitworth who showed that <select> was the control web developers were having the most problems styling with CSS.

While it’s relatively easy to style the appearance of the button part of a <select> (the thing you see in the page when the popup is closed), it’s almost impossible to style the options (the thing you see when the popup is open), let alone add more content within the popup.

As a result, design systems and component libraries have been rolling out their own selects, made from scratch using custom HTML markup, CSS, and often a lot of JavaScript, in order to have something that integrates nicely with the other components.

Unfortunately, doing so correctly with the right accessibility semantics, keyboard support, and popup positioning is not easy. Web developers have poured hours and hours over the years, trying to solve the same problems over and over, and there are many inaccessible selects out there.

It’s about time we got a properly style-able built-in <select> so we don’t have to write this code ever again!

The Open UI initiative

Open UI is a group of developers, designers, and browser implementers who set out to solve this exact problem, and while they’re at it, tackle other missing controls too.

The purpose of Open UI is to eventually make it possible for web developers to style and extend built-in UI controls (this includes <select>, but dropdowns, checkboxes, radio buttons, and others too). To achieve this, they produce specifications for how these controls should be implemented in the web platform as well as the accessibility requirements they should address.

The project is still in its infancy, but things are moving fast and, as we’ll see below, exciting things are already happening.

You can join the group and participate in the meetings, research, and specification efforts.

The <selectmenu> control

Based on the  Open UI’s  <select>  proposal , the implementation of a new  <selectmenu>  control has started in  Chromium ! The work is done by the Microsoft Edge team, in collaboration with the Google Chrome team. It’s even already available in Chromium-based browsers by enabling the “Experimental Web Platform features” flag in the  about:flags page .

<selectmenu>  is a new built-in control that provides an option selection user experience, just like  <select> , with a button showing the selected value label, a popup that appears when that button is clicked, and a list of options that get displayed.

Why a new name?

Why not just replace the existing <select> control? The name “selectmenu” started as a working name, but it seems to have stuck so far, and no one has come up with anything better yet.

More importantly, the existing <select> control has been used on the web for a very long time. As such, it can probably never be changed in any significant way without causing major compatibility issues.

So, the plan (and remember this is all still very experimental) is for <selectmenu> to be a new control, independent from <select> .

Try it out today

This isn’t ready for production use yet, but if you’re as excited as I am about using it, here’s how:

• Open a Canary version of a Chromium-based browser (Chrome, Edge).
• Switch the “Experimental Web Platform features” flag in the about:flags page and restart.
• Replace any <select> by <selectmenu> in a web page!

That’s it! It won’t do much by default, but as we’ll see later, you’ll be able to style and extend the control quite extensively with this one tag name change.

We love feedback!

Before we go into how to use the control, if you do use it, the Open UI group and people working on the implementation in Chromium would love to hear your feedback if you have any.

By being an early tester, you can actively help them make the control better for everyone. So, if you encounter bugs or limitations with the design of the control, please send your feedback by creating an issue on the Open UI GitHub repository !

And now, let’s talk about how the control works.

The anatomy of a <selectmenu> control

Because the various parts of the selectmenu can be styled, it’s important to first understand its internal anatomy.

• <selectmenu> is the root element that contains the button and listbox.
• <button> is the element that triggers the visibility of the listbox.
• <selected-value> is the element that displays the value of the currently selection option (optional). Note that this part does not necessarily have to be placed inside the <button> part.
• <listbox> is the wrapper that contains the <option> s and <optgroup> s.
• <optgroup> groups s together with an optional label.
• <option> represents the potential value that can be chosen by the user. There can be one or more.

Default behavior

The default behavior of the <selectmenu> control mimics the behavior of the <select> control. You can use it just like a native <select> , with the following minimal markup.

When doing so, the default <button> , <selected-value> , and <listbox >are created for you.

Styling parts of the control

This is where things become interesting! One way to style the control to match your requirements is to use the CSS ::part() pseudo-element to select the different parts within the control’s anatomy that you wish to style.

Consider the following example where ::part() is used to style the button and the listbox parts:

The above example results in the following style:

::part() can be used to style the <button> , <selected-value> , and <listbox> parts of the control.

Use your own markup

If the above isn’t enough for your needs, you can customize the control much more by providing your own markup to replace the default one, and extend or re-order the parts.

A <selectmenu> has named slots that can be referenced to replace the default parts. For example, to replace the default button with your own, you can do the following:

The slot="button" attribute on the outer <div> tells the <selectmenu> to replace its default button with the contents of the <div> .

The behavior="button" attribute on the inner <button> tells the browser that this element is what we want to use as the new button. The browser will automatically apply all the click and keyboard handling behavior to this element as well as the appropriate accessibility semantics.

The above code snippet results in the following style:

Note that the slot and behavior attributes can also be used on the same element.

You can replace the default listbox part in a similar fashion:

Interestingly, the <div popup> used here is also being proposed by Open UI and implemented in Chromium at the moment.

The element with behavior="listbox" is required to be a <div popup> . Applying behavior="listbox" tells the browser to open this element when the <selectmenu> button is clicked, and the user can select <option> s inside it with mouse, arrow keys, and touch.

Extending the markup

Not only can you replace the default parts with your own, as seen above, you can also extend the control’s markup by adding new elements. This can be useful to augment the listbox or button with extra information, or to add new functionality.

Consider the following example:

Here we’re using custom markup to wrap the list of options and create our own content as seen below:

Replacing the entire shadow DOM

Finally, and if the above wasn’t enough, you can also extend the control’s markup by replacing its default shadow DOM altogether by calling attachShadow() . For example, the demo in the previous section could be modified as follows:

Written this way, the <selectmenu> ‘s custom markup is fully encapsulated in its shadow DOM. The <selectmenu> can therefore be dropped into any page without risk of interference from the surrounding content’s styles.

Closing remarks

As we’ve seen, the new experimental <selectmenu> control offers a lot of flexibility when it comes to styling and even extending a traditional <select> . And it does this in all the right ways, because it’s built into the browser where accessibility and viewport-aware positioning are handled for you.

Open UI has more documentation about <selectmenu> , and if you want to see more code showing how to use the <selectmenu> , here are a few demos as well.

Again, this is work in progress and will most certainly change as a result of feedback received by the Open UI group.

I can’t wait to see specifications start to appear in HTML and CSS standard bodies, and for the implementation to become more stable, as well as see other browser engines getting interested in this. You can help make this happen! Testing the control, reporting issues , or getting involved are all great ways to help push this effort forward.

I appreciate that you touch on accessibility in the post, but I don’t feel it goes deeply enough into the challenges with this new element.

In order for any new element to be exposed properly to all users, it also has to map to the platform accessibility APIs. I could mint a <gumball> , but if my operating system has no native equivalent and has no mappings for my screen reader, keyboard, voice control, switch, etc., then it is meaningless.

For example, if the <option> s map as they do today, then they can effectively only contain text. And their siblings (children of the listbox role) can only be <option> s as well. That is a huge unaddressed challenge that can limit practical uptake, meaning devs can continue to use the inaccessible alternatives.

While using other approaches, such as a CSS background image, could mitigate problems we will have with accessible name computation , that also means support for alternative text for CSS generated content would need to be a dependency — it would have to be supported in all browsers first. Good luck with Safari.

Some of the samples also need better keyboard support before they can be evaluated for other features. I am of the opinion no demo should be posted unless it at least handles keyboard access properly. Not doing so diminishes trust in the pattern.

For now, if all you need is some font, sizing, and color control over the trigger, then you can do that today with a native <select> .

Other example patterns are a mish-mash of disclosure widgets on speed, novel comboboxes , and experimental patterns that users struggle to grok.

This is all part of the process for hammering out any new element. But I want to make sure the accessibility aspects are not discussed as afterthoughts. Again.

Thanks Adrian for raising these concerns. I, too, want to make sure accessibility isn’t discussed as an after though, and I don’t think it is. The Open UI meeting I attended about <selectmenu> definitely had accessibility as one of the important discussion topics.

Furthermore, we’re far from being production-ready here. So there’s time and I fully expect the new element to change over time as a result of discussions like this.

It is very exciting to see the progress being made on this however, since it’s been a common problem for a long time. And my hope with the demos was to make the work more visible, and therefore raise awareness about the project, and perhaps participation in it.

I’m happy to work on them more and make sure they have better keyboard support. They started simply as a way to exercise the custom styling abilities of ` ‘, but it’s true that I added a few of them with more complex custom markup, and those ones do raise questions. I do believe those questions are worth raising though.

YES! I’ve been crying out for this ever since I started dev. The number of conversations I’ve had with designers and project managers saying we either can’t implement this design or it’ll take some extra JS to include this thing that’s generally not semantic HTML or could add a fair amount of bloat is doing my head in.

On the one hand, I love that something like this is finally being done. On the other, I hate that, by introducing a new element, it seems like there is no graceful degradation other than using a JavaScript polyfill. That will mean years before I can rely on it being ubiquitous enough to be usable without having to do both a <select> and a <selectmenu> in my code, bloating it. Not having it would make it completely unusable for people who browse with JavaScript disabled. It’s not like the current <select> element has a list attribute allowing the two components to share the <option> s.

Love the idea, not a fan of the implementation.

The new syntax is overcomplicated and the new <selectmenu> element is unnecessary. Why not KISS and extend the existing <select> element by allowing to apply CSS styles to the <option> elements? This would be backwards compatible with existing <select> elements.

This was one of the options that the people working on this considered at first I believe. The potential compatibility breakages that the new implementation would introduce have been deemed too important to just replace the existing though, and a new name was chosen.

That being said, it is too early to know how this new component will ship. It may very well be that, over time, it gets simplified again and replaces . We shall see.

I can only encourage you to raise this issue on the OpenUI repository here: https://github.com/openui/open-ui/issues/

(sorry my last comment contained html which I forgot to escape, let me re-post)

This was one of the options that the people working on this considered at first I believe. The potential compatibility breakages that the new implementation would introduce have been deemed too important to just replace the existing <select> control though, and a new name was chosen for now.

That being said, it’s very early still and everything can happen.

I can only suggest you to raise this issue on the OpenUI repository here: https://github.com/openui/open-ui/issues/

Can i put a selectmenu in the options of a selectmenu to build a drop down cascading menu nav bar free of javascript?

I don’t know if the current implementation will prevent you from doing it, I doubt that it will. But I wouldn’t advise you do use selectmenu for this. The control is made for letting users choose a value from a list, and embedding other inputs within it raises interesting accessibility challenges.

Take a look at this demo though: https://sulfuric-purring-meteorite.glitch.me/selectmenu-edit-menu.html It uses the popup element to create sub-menus.

We basically gave up on native HTML selects a long time ago, and use Semantic UI/Fomantic UI’s dropdown, Select2, etc. instead.

This would definitely be a huge step forward!

I have also been asking “Why can’t they give us a new <select> tag. It is 2022 already.”

I am excited to see this start getting used.

Here is a simple function to see if the browser supports the new <selectmenu> tag:

const selectMenuExists = () => window.HTMLSelectMenuElement != null;

Really exciting stuff! I am a little worried about the nomenclature issue between and however. I think the more our standards are based on historical contingencies, the more idiosyncratic and unteachable they become over time. Hopefully a different compromise can be reached.

Since this seems to be made of webcomponents under-the-hood, is there any implementation of this right now as a polyfill?

Looks really cool and useful :) There is one thing I have concerns about, which is the “experimental features” flag. I can’t use this really good feature in a product, because I can’t force my clients to change this flag in order to use my app. Do you have any estimation for when I would be able to use this without changing the flag?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

::selection

The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

Allowable properties

Only certain CSS properties can be used with ::selection :

• background-color
• text-decoration and its associated properties
• text-shadow
• -webkit-text-stroke-color , -webkit-text-fill-color and -webkit-text-stroke-width

In particular, background-image is ignored.

Accessibility concerns

Don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs. For people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality.

If overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it.

Color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors. To meet current Web Content Accessibility Guidelines (WCAG) , text content must have a contrast ratio of 4.5:1 , or 3:1 for larger text such as headings. (WCAG defines large text as between 18.66px and 24px and bold , or 24px or larger.)

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• pointer-events - control which events are active on the element

• React Native
• CSS Frameworks
• JS Frameworks
• Web Development
• How to set CSS style to half of a character ?
• jQuery html() Method
• jQuery before() Method
• jQuery outerHeight() Method
• jQuery outerWidth() Method
• jQuery append() Method
• How to smoothly transition CSS background images using jQuery?
• jQuery | Get and Set CSS Classes
• How to block comments in YAML ?
• 5 Best Email Marketing Software
• How to disable paste protection in Mozilla Firefox Developer Console?
• HTML Symbols
• How to remove focus around buttons on click?
• Introduction and Installation process of Gulp
• What is the Caching Mechanism ?
• YAML Comments
• Explain the process of buying domain
• What is Full Stack Development ?

How to reset/remove CSS styles for element ?

The browser uses some pre-defined default values to most of the CSS properties. These default values may vary depending on the browser and also the version of the browser being used. These default values are given in order to ensure uniformity throughout web pages. But in some cases these defaults result in an unexpected action to be performed by the web page, hence removing these defaults is a viable method. In most cases, the reset can be done using some pre-defined reset methods. There are many other reset methods. But the problem with those reset methods is that, they are used to remove all the styling present in a web page (remove all the browser defaults for all elements and their properties), but if we want to remove the default only or some specific style for one element then the value unset comes in handy.  Problem Statement: Most of the cases the default buttons provided by web browsers are very bland and not stylized. To make it more stylized and to make it fit into the theme of the web page it could be stylized manually using CSS. But manual styles cannot be applied until the default styles are removed. Hence we apply the following code to remove the default styles present on a button. Example 1: Here you will see how to use unset property by HTML and CSS. This example remove only the default browser style.  

Output:   

Example 2: Here you will see how to trigger unset property by HTML, CSS an jQuery.  

• Before clicking the button:    

• After clicking the Button:    

Please Login to comment...

• Web Technologies
• 10 Best Todoist Alternatives in 2024 (Free)
• How to Get Spotify Premium Free Forever on iOS/Android
• Yahoo Acquires Instagram Co-Founders' AI News Platform Artifact
• OpenAI Introduces DALL-E Editor Interface
• 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

What You Need to Know about Modern CSS (Spring 2024 Edition)

My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t have a great understanding of them and could use a plain language explanation of what it is, why they should care , and a bit of reference code. Maybe that’s you.

I’d like to work on our collective muscle memory on these features. Like I said , “even if you know about this stuff, it takes time to build the muscle memory around it.”

There is quite a bit more syntax, detail, and nuance to these things than I am presenting here. I want you to know what’s possible, reference the most basic usage and syntax, then dig deeper when you need to.

Container Queries (Size)

What are size container queries.

Container Queries allow you to write styles that apply to the children of a container element when that container matches certain media conditions, typically a width measurement.

When should you care?

If you’ve ever thought: I wish I could make styling decisions based on the size of this element, not the entire page like @media queries force me to do. Then using @container queries are for you! People who work on design systems or heavily component-based websites will probably mostly use Container Queries to style things based on size, because the size of the entire page is a poor proxy for the size of a component.

Basic Demo of Usage

Use the resizer in the middle to see the calendar change layout depending on how much space it has. It has three breakpoints of its own.

Container Queries (Style)

What are style container queries.

Container Style Queries allow you to apply styles when a given Custom Property has a given value.

Have you ever wanted a mixin in CSS? As in, you set one property but get multiple properties. Sass made mixins fairly popular. You can do that with a Style Container Query. But just like how Sass had variables then CSS variables turned out to be more powerful and useful, Style Container Queries are likely to be more powerful and useful, because they respect the cascade and can be calculated and such.

Container Units

What are container units.

Container Units (literally units, like px , rem , or vw ) allow you to set the size of things based on the current size of a container element. Similar to how with viewport units 1vw is 1% of the browser window width, 1cqw is 1% of the width of the container (although I’d recommend you use cqi instead, the “logical equivalent”, meaning the “inline direction”).

The units are cqw (“container query width”), cqh (“container query height”), cqi (“container query inline”), cqb (“container query block”), cqmin (smaller of cqi and cqb ), and cqmax (larger of cqi and cqb ).

If the sizing of anything in an element feels as if it should be based on the current size of the container, container units are essentially the only way. An example of this is typography. A typical Card element may deserve a larger header text when it happens to be rendered larger, without something like a class name needing to be added to control that. (I’m a fan of this demo .) Even a container query is clunky comparatively.

This element uses container query units for not only the font-size , but the padding , border , and margin as well.

The :has() Pseudo Selector

What is the :has() selector.

The :has() selector allows you to conditionally select an element when elements deeper in the DOM tree of the original element match the selector you put inside :has() .

If you’ve ever wanted a “parent” selector in CSS, :has() can do that, but it’s more powerful than that, as once you’ve selected the parent you want, you can again drill back down. Jhey Tompkins once called it a “family selector” which a nice way to think about it. You can also combine it with :not() to build a selector when an element doesn’t “have” a matching element inside.

View Transitions

What are view transitions.

There are two types of View Transitions:

• Same-Page Transitions (Require JavaScript)
• Multi-Page Transitions (CSS Only)

They are both useful. A same-page transition involves and animation when the DOM is changed without the page changing, like a list being sorted. A multi-page transition is for animating elements between page loads, like a video thumbnail transitioning into a video element. This is the basic syntax for a same-page transition:

For multi-page transitions: you need this meta tag:

Then any element you want to transition between pages you make sure has a totally unique view-transition-name applied in the styles, on both the outgoing page and incoming page.

Users can understand an interface better if an element moves to a new position rather than instantly being there. There is an animation concept called tweening where the animation is automatically created based on a starting and ending state. View Transitions are essentially tweening. You can control aspects of the animation, but for the most part the animation is automatically created based on the starting and ending state of the DOM, rather than you having to be really specific about the animation details.

This is an example of a same-page view transition:

What is nesting?

Nesting is a way of writing CSS that allow you to write additional selectors within an existing ruleset .

Nesting is mostly a CSS authoring convenience, but the fact that it can group related CSS nicely together and prevent you from having to repeat writing a selector can mean avoiding mistakes and making the CSS easier to read. Nested CSS can also be something of a footgun in that may encourage writing CSS that matches the nesting of HTML in an unnecessary way, increasing the specificity and decreasing the reusability of some CSS.

The only major difference from Sass-style nesting is that you can’t combine the & directly.

Scroll-Driven Animations

What are scroll-driven animations.

Any animation that is tied to the scrolling of an element (often the page itself) can now be done in CSS rather than needing to bind DOM scrolling events in JavaScript. They come in two varieties:

• The scroll progress of the element. ( animation-timeline: scroll() )
• An element’s current viewable position within the element. ( animation-timeline: view() )

Imagine a reading progress indicator bar that fills from 0% to 100% as the user scrolls down the page. That can be done with an animation moving the background-position of an element tried to the overall scroll position of the page. Doing this in CSS instead of JavaScript is good for performance .

The other major use case covered by scroll-driven animations is to run an animation as an element enters (or leaves!) the viewport. You have lots of control over the details, like when the animation starts and ends based on how visible the element is.

Basic Example of Usage

This is the demo from when we looked at image zooming and page scrolling .

Anchor Positioning

What is anchor positioning.

Anchor positioning allows you to place items relative to where another element is. Seems pretty obvious when put like that, but that’s what it is. You declare an element an anchor and give it a name, then can position elements to the top/right/bottom/left (or center, or the logical equivalents) of the anchor.

Once you can use this freely, you’ll have to care less about exact DOM positioning of elements (aside from accessibility concerns). The way it is now, the element you want to position relative to another has to be a child element and for there to be a positioning context to work within. This can dictate where elements go in the DOM, whether or not that makes sense.

The big use cases are going to be tooltips and custom context menus.

At the time I’m publishing this, this only works in Chrome Canary with the “Experimental Web Platform Features” flag enabled.

What is Scoped CSS?

Scoping in CSS is in the form of an @scope at-rule that declares a block of CSS to only apply to the given selector. And optionally, stop applying at another given selector.

You can also scope CSS by applying a class and nesting within that class. But @scope has a few tricks up it’s sleeve that can make it interesting. The “donut scope” option is a unique ability it has:

More logical proximity styling is another useful feature. This is a bit tricky to explain but once you see it you can’t unsee it. Consider theming. You have a .dark selector and a .light selector. If you only ever use one on the entire page, that’s fine, but if you end up nesting them at all, because they have the same specificity, whichever one you define later is technically a bit more powerful, and can win out even if it doesn’t make sense to. Minimal example:

You might think the paragraph element in there would have the color purple, but it will actually be red . That’s just awkward, but it can be fixed with @scope . When scoped selectors match, as Bramus says , “it weighs both selectors by proximity to their scoping root”, and since “light” is closer here, it would win.

My favorite though is the ability to drop in a <style> tag in the DOM and have it apply scoped styles only to that bit of the DOM, without having to name anything.

Cascade Layers

What are layers.

Cascade Layers in CSS are an extremely powerful syntax that affects the styling strength of a chunk of styles. You can optionally name and order layers (if you don’t explicitly order them, they order in source order). Styles in higher layers automatically beat styles in lower layers, regardless of selector strength. Styles not within layers are the most powerful.

We’re used to thinking that body#home is a much more powerful selector, thus the background will be #eee . But because there are unlayered styles here, that will win, making the background white .

You may have as many layers as you like and can order them upfront. I think layering is likely to become a best practice on new greenfield projects, and take shape something like:

One gotcha is that !important rules on lower layers are actually more powerful.

One clear way you get a lot of value out of CSS layers if you work on a project that uses a third-party styling library. You can put that library on a lower layer than the styles that your team writes, and you won’t have to worry about fighting the third-party library in terms of selector strength. Your styles on a higher layer will always win, which is likely to create cleaner and more maintainable CSS.

For example, put all of Bootstrap on a lower layer just using the layer keyword and then any styles you write after that will win, even if Bootstrap itself uses a higher power selector.

Logical Properties

What are logical properties.

Logical properties are alternatives to properties that specify a direction. For example, in a left-to-right language like English, the inline direction is horizontal and the block direction is vertical, so margin-right is equivalent to margin-inline-end and margin-top is equivelant to margin-block-start . In a right-to-left language like Arabic, margin-inline-end changes to the equivalent of margin-left , because that is the end side of the inline flow of elements. There are a lot of CSS properties and values that have a directional component like this (border, padding, offset, set), so the trick is understanding inline and block flow and using the correct start or end value.

Often when you are declaring directional information in CSS, what you mean is “in the inline direction of text”. That might sound strange, but imagine a button and the space between an icon and the text. If you apply margin-right to the icon to space it away from the text, but then the page is translated to a right-to-left language, that spacing is now on the wrong side of the icon. What you meant was margin-inline-end on the icon. If you code your side using logical properties in this way, it will automatically translate better without writing any additional conditional code.

What is the Display P3 Color Space?

We’re largely used to the sRGB color space on the web. That’s what hex colors use, and the rgb() , hsl() , and hsb() functions. Many displays these days are capable of display a much wider range of colors than sRGB is capable of describing, so being limited to that color space sucks. The Display P3 color space is about 50% wider than sRGB, expanding in the direction of more rich and vibrant colors. New CSS functions, which can even use different color models that have their own useful properties, allow us to declare colors in this space.

If you want to use colors that are quite vibrant, you’ll need to tap into colors in the P3 Color Space. Using newer color models (and functions) can do this, and are very useful for a variety of other things.

For example, the oklch() function (and thus OKLCH color model ) can display any color any other method can (plus P3), has a similar human readability in common with hsl() , and has “uniform perceived brightness”, so that the first number (lightness) behaves way more predictably than it does in hsl() . That’s awfully nice for color on the web. But it’s not the only new color model and function! I find the oklab color model generally best for gradients.

You can edit these <style> blocks because I made them display: block; and contenteditable :

Color Mixing

What is color-mix() .

The color-mix() function in CSS allows you to, wait for it , mix colors. This kind of thing has been baked into CSS processing tools for a long time, and as typical of CSS evolution, now that it’s in native CSS, it’s more thoughtful and powerful than it ever was in a processor.

When you should care?

Have you ever wanted to darken or lighten a color you already have on the fly? That’s one of the things color-mix() can do. Color mixing can happen in a specific color model which means you can take advantage of how that models works. For example, the perceptually uniform brightness of OKLCH makes it sensible to use for adjusting brightness. You can make whole color palettes using color-mix() .

Browser Support

Margin trim, what is margin-trim .

The margin-trim property removes any margin in the direction specified from the selected container at the end of that direction. Imagine you have five blocks in a row that all have right margin on them in a container. You might select the :last-child to remove the right margin. With margin-trim you can ensure that margin is removed from the parent element itself.

You know how the gap property of flexbox and grid is… awesome? It only puts spacing between elements. Well, if you need to apply spacing between elements but you’re in a position where you can’t use gap , margin-trim is awfully nice as it means you apply directional margin to all the children and not worry about an additional fancy selector to select the first or last one and remove that unneeded final margin. It might end up a best practice .

The last paragraph here is a notorious situation where the bottom margin on it creates more space at the bottom than any of the other edges. With margin-trim we can ensure it’s sliced off without having to select that last paragraph and manually remove it.

Text Wrapping

What is text-wrap .

The text-wrap property likely isn’t in your long term CSS memory. It’s capable of text-wrap: nowrap; , but we generally think of white-space: nowrap; for this. But now, text-wrap has two new tricks up it’s sleeve:

• text-wrap: balance; — Attempt to make equal-width lines when text wraps.
• text-wrap: pretty; — Avoid orphans.

A headline with one word orphaned onto the next line just looks really awkward and could be considered poor typography. There wasn’t a great way to solve this before, short of somewhat awkward tricks like inserting a &nbsp; instead of a normal space between the last two words. Balancing a headline prevents this, but goes further in making the multiple lines of text generally the same width. Using pretty is more focused just on orphan prevention alone, making it more appropriate for body text.

What is Subgrid?

Subgrid is an optional part of using CSS grid that is relevant when you are nesting gridded elements. By setting grid-template-columns: subgrid; or grid-template-rows: subgrid; on a grid-level element, you’re saying “inherit these columns or rows from my parent grid, where relevant”.

The point of using grids for layout is generally lining things up . Without subgrid , it means that child elements of a grid don’t have access to the grid lines of the parent grid, and thus lack the opportunity help line things up. Subgrid fills that gap. When DOM nesting is important for functionality or accessibility, like in a <form> , subgrid can help ensure things line up sensibly .

Things to keep an eye on…

The speed of CSS development doesn’t seem to have slowed down. There is plenty to continue to watch for and look forward to.

• CSS Mixins & Functions — actual mixins and functions that take parameters
• Relative Color Syntax — a way to manipulate the parts of colors in an intuitive and powerful way.
• Interop 2024 — All the things that we can essentially bet on for being cross-browser compatible soon, including the relative color syntax above.
• The CSS property field-sizing should help the long-standing difficult issue of auto-resizing form elements like textareas and input to the content they contain.
• <selectmenu> in HTML is essentially a fully CSS styleable <select> , which is wild.

That’s just a few things to watch. You might as well subscribe to our feed as we’ll be doing the watching for you and then you’ll catch the next one.

Did I miss a relatively new favorite of yours? Let me know.

Wanna learn CSS from a course?

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

6 responses to “What You Need to Know about Modern CSS (Spring 2024 Edition)”

Very helpful summary!

Awesome post by one the most CSS saavy devs in CSS. Very helpful and thankful to FEM to post this contents free.

Very helpful article, thank you very much!

However, please note that in “Scoping”, the example given with the three embedded divs and light/dark classes does not work. Contrary to what the article says, “some text” will use the “light” style. I am guessing this is an overly simplified version of the example given on the MDN page for @scope, which is slightly more convoluted: https://developer.mozilla.org/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved

You’re correct! Thank you. Selecting within the class exhibits the issue more clearly: https://codepen.io/chriscoyier/pen/oNOpqJK

This is very useful article. However, I have a big problem with container queries, at least as you have described them. Problem 1: You are writing if/then code in CSS: that should be in JavaScript. Problem 2: The bigger issue: you are writing more code then you need to. In the example you used, you could have been handled the situation much easier, and with less code, with a class. style=”–variant: 1;” is class1 and style=”–variant: 2;” is class2. Your code would be simpler and easier to read in HTML, CSS and JS.

You are writing if/then code in CSS: that should be in JavaScript.

Do you feel that way about media queries? Hover states? Focus styles? Disabled styles? Validity checks? Heck, every selector is an if/then statement. If the selector matches, do the styles.

you could have been handled the situation much easier, and with less code, with a class. style=”–variant: 1;” is class1 and style=”–variant: 2;” is class2. Your code would be simpler and easier to read

I agree class changes are a very clear way to change the state of something. But changing the value of a custom property in CSS is a different beast entirely. You could change a custom property because of a :has() selector, or a media query, or a state change, or a million other things. In those cases, you don’t have the ability to change a class in the HTML. But with a style query, you can still change a whole chunk of styles when the custom property changes.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.