Some parts of the browser feel untouchable, like they came built-in from the browser itself. Can CSS help us with that? CSS you didn’t know you could style Most developers think of CSS as the tool for styling layout, spacing, and colors, but modern CSS can do much more than that. CSS can even style some native elements in your browser that you probably never even thought about styling. Some parts of the browser feel untouchable, like they came built-in from the browser itself. Have you ever tried changing the color of the user selection highlights? What about the scrollbars? Can CSS help us with that? Yes, it certainly can. If you want to learn how, please just keep reading. Selection CSS offers a great way to indicate that your website was built by a professional who left nothing undesigned in their website, it’s called the selection pseudo-selector. This can be applied to the whole website, the whole page or just a part of it using CSS like the one below. /* This will style the selection of the entire page */ body::selection { background-color: pink; } /* This will style the selection of the "blue" class elements */ .blue::selection { background-color: skyblue; } You can style the color and background-color (and also add text-shadow and text-decoration), but please consider readability here as some people are selecting the text as they read. Also you should probably keep in mind all accessibility considerations like color blindness and high contrast requirements. For more information and a live demo, see the CodePen below: https://medium.com/media/90d1799dd058639145aba7a58bd70bf6/href Further reading: MDN- ::selection Caret The caret is the little blinking “cursor” inside text inputs and text areas, it can be set to a different color or shape, by default it looks like this: | and it is blinking. We can change the shape of the caret by using caret-shape to “bar” (Examp|), “block (Examp▮) or “underscore” (Examp_). Traditionally we see the “bar” in most web forms, the “block” is something we can see in the Terminal, or old DOS interfaces and the “underscore” is usually reserved for Word Processing software. But that’s not all, we can also change the color of all three of these blinking carets right from our CSS styles. input[type="text"] { caret-color: red; caret-shape: block; } For more information and a live demo, see the CodePen below: https://medium.com/media/97f8207f6eb021102a2448c971194d59/href Further reading: MDN- caret color MDN- caret shape Scrollbars The scrollbars can also be tweaked by CSS, but this one I would test to death on many devices and platforms, since there are inconsistencies between them. The CSS property scrollbar-width can be set to auto, thin or none and the none value doesn’t show any scrollbar but it keeps the element itself scrollable, I don’t like that combo but I saw many websites that use scroll but I can’t see the scrollbar itself so I guess it has its place. It’s important to note that scrollbar-color doesn’t work unless you give it 2 color values, the first is for the scroll thumb and the second is the color of the track shown (on a Mac, at least) when hovering the scroll, unless changed in the settings. If you don’t like that effect, or it throws off your design, you can always use something like the code below to hide the second color (so no track will be visible to the user). .scroll-element { scrollbar-color: red transparent; } For more information and a live demo, see the CodePen below: https://medium.com/media/257dc1364353e4a4f5968804986c8485/href Further reading: MDN- scrollbars styling MDN- scrollbar width MDN- scrollbar color Accent color This one is pretty straight forward, accent-color can change the color of different elements in your HTML documents. It will change the default colors of elements like: Checkboxes, Radio Buttons, Range Inputs and Progress Bars, while honoring all accessibility guidelines for users who need it. Notice for example how the code below will make all the Checkboxes black instead of the default white, since it’s more readable to the user. .container.green { accent-color: yellowgreen; } For more information and a live demo, see the CodePen below: https://medium.com/media/620f21382aa75ef2afc2aedbf37b0582/href Further reading: MDN- accent color Dark and light modes This section is actually two tips, the first one is to use something like this on your entire HTML, body element or any element you want to change theme with the user preferred mode: html { color-scheme: light dark; } I prefer to use it on the entire HTML element, like the example above, at least until you’ll get the hang of exactly what changes and what doesn’t. This code should automatically change everything to be in the right theme for the user preferred mode, either dark mode or light mode. The second tip that can compensate well with this first example is to use the code below on any element you want to change color when the user goes between light mode and dark mode, the browser should pick the correct option automatically every time. .container { background-color: light-dark(white, black); } ``` The code above means that all your containers will get a background-color of white in light mode and black in dark mode and it will be applied dynamically when the user goes between them so no page refreshes required by the user. For more information and a live demo, see the CodePen below: https://medium.com/media/2c19b19cf9f573a95ad5e78ef3cca3f0/href Further reading: MDN- color-scheme MDN- light-dark() Field size This one is just for textarea and input elements, it allows them to grow and shrink depends on the content they hold. textarea { field-sizing: content; width: 100%; max-height: 50vh; } The example code is for textarea to change its size when the user inputs content, I highly recommend to add either width or max-width to limit its potential infinite size and of course same goes for the height. For more information and a live demo, see the CodePen below: https://medium.com/media/b4c8e3c8f5bdd270fd9f77048d1f6691/href Further reading: MDN- field-sizing Conclusion I wrote this article because I see many websites where none of these styles apply, many websites with the default selection color, default scrollbars, no accent-color and no dark mode to speak of. I realize that’s partly the fault of our design tools that are not built on common grounds with our products and make it harder to show and handoff such changes to front-end developers. But if we want to get these custom CSS styles to appear in more websites we must first get to know them, and that is why I wrote this. Please share it with any designer or developer you think can use a refresher, and in the mean time if you enjoyed this, you might want to read about How the tools we use change the products we design . See you all in the comments below. Further reading: More CSS Quick Tips, Kevin Powell, YouTube 7 CSS Tricks That Will Blow Your Mind, Coding2GO, YouTube Dark Mode in CSS Guide, Adhuham, CSS Tricks CSS Color Functions, Sunkanmi Fafowora, CSS Tricks The Current State of Styling Scrollbars in CSS, Chris Coyier, CSS Tricks Article Inline Links: MDN- ::selection MDN- caret color MDN- caret shape MDN- scrollbars styling MDN- scrollbar width MDN- scrollbar color MDN- accent color MDN- color-scheme MDN- light-dark() MDN- field-sizing CSS you didn’t know you could style was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.