Clean • Professional
The resize property allows users to change the size of elements (like a <textarea> or a <div>) by dragging from the corner.
Common values:
resize: both; → resize in both directionsresize: horizontal; → resize width onlyresize: vertical; → resize height onlyresize: none; → disable resizingNote: Add overflow: auto; or hidden; for non-textareas.
Example :
<textarea class="resizable-textarea" placeholder="Type here..."></textarea>
.resizable-textarea {
width: 300px;
height: 150px;
padding: 10px;
border: 1px solid #ccc;
resize: both;
overflow: auto;
}
The caret-color property sets the color of the blinking text cursor.
Example :
<input type="text" class="custom-input" placeholder="Search...">
.custom-input {
border: 2px solid #4CAF50;
padding: 10px;
caret-color: #4CAF50; /* green cursor */
}
The accent-color property changes the color of form controls like checkboxes, radio buttons, and progress bars.
Example :
<input type="radio" id="standard" name="delivery" checked>
<label for="standard">Standard</label><br>
<input type="radio" id="express" name="delivery">
<label for="express">Express</label>
body {
accent-color: #FF5722; /* orange */
}
Default scrollbars look plain, but CSS lets you style them (mainly in WebKit browsers like Chrome and Safari).
For WebKit:
::-webkit-scrollbar → entire bar::-webkit-scrollbar-track → background::-webkit-scrollbar-thumb → handleFor Firefox:
Use scrollbar-color and scrollbar-width.
Example :
<div class="scrollable-content">
<p>Lots of text here... scroll down!</p>
<p>More content...</p>
</div>.scrollable-content {
width: 300px;
height: 200px;
overflow-y: scroll;
/* Firefox */
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
/* WebKit */
.scrollable-content::-webkit-scrollbar {
width: 12px;
}
.scrollable-content::-webkit-scrollbar-thumb {
background: #888;
}
.scrollable-content::-webkit-scrollbar-thumb:hover {
background: #555;
}