User Interface Properties

Resize Property – Let Users Adjust Element Size

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 directions
• resize: horizontal; → resize width only
• resize: vertical; → resize height only
• resize: none; → disable resizing

Note: 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;
}

Caret-Color – Change the Text Cursor Color

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 */
}

Accent-Color – Style Checkboxes and Radios

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 */
}

Custom Scrollbar Styling – Better Looking Scrollbars

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 → handle

For 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;
}