Styling Placeholder Text

To customize the appearance of the placeholder text within an HTML input field, developers target the pseudo-element ::-webkit-input-placeholder. This selector allows granular control over font characteristics such as size, color, and opacity, enabling the hint text to match the overall design system.

.search-box::-webkit-input-placeholder {
  font-size: 14px;
  color: rgba(150, 150, 150, 0.6);
  font-style: italic;
  letter-spacing: 1px;
}

Creating Text Outlines

The -webkit-text-stroke property provides a straightforward way to render a border around text characters, often used to create "hollow" text effects. It accepts two values: the stroke width in pixels and the desired color. This property works similarly to adding a stroke in vector graphics software but is applied directly via CSS.

.brand-title {
  color: transparent; /* Makes the fill transparent so only the stroke is visible */
  font-weight: 700;
  font-size: 48px;
  -webkit-text-stroke: 2px #ff3e00;
}

Clamping Multi-line Text

Restricting block text to a specific number of lines with an ellipsis requires a combination of legacy flexbox properties. The core property, -webkit-line-clamp, defines the maximum number of visible lines. However, it only functions correctly when the display mode is set to -webkit-box and the box orientation is set to vertical.

.card-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Limits text to 3 lines */
  overflow: hidden;
  text-overflow: ellipsis;
}