Introduction 🚀
CSS can be annoying to deal with because sometimes HTML Elements don't just go in the flow that you want them to go 😓. In This Article, we will talk about 7 unknown useful properties I bet you do not know ! ⚡
- Webkit input placeholder
- Caret color
- The ":not" selector
- Outline property
- Webkit scrollbar
- Text overflow ellipsis
- Webkit outer/inner spin button
Webkit-input-placeholder
The -webkit-input-placeholder selector allows to modify the input placeholder style.
Caret color
The caret-color property modify the cursor color inside inputs or textareas.
The ":not" selector
The :not selector matches every elements that is NOT specified in the selector.
Outline property
The outline property removes the input status line when focusing on it.
Webkit-scrollbar
The -webkit-scrollbar gives you ability to control the scrollbar that exists on elements. For example, you can hide it as shown in the example below.
Text overflow ellipsis
Have you ever wondered how to make long text shows some words followed by 3 dots depending on the width of the container ? Yes, you can do that with the ellipsis value of text-overflow property.
Webkit outer/inner spin button
The -webkit-outer-spin-button and -webkit-inner-spin-button allows you to hide both arrows that exists on the number input for incrementing and decrementing.
Conclusion ✅
If you found that those properties are valuable and useful, start using them in your next projects and share the post. 🙏♻
