CSS Select Dropdown and Textarea Styling

Textarea

A textarea is a multi-line text field. It can be resized by the user, which is useful but sometimes breaks layouts.

index.html

HTML

<style>
  textarea {
    width: 100%; max-width: 320px; min-height: 90px; box-sizing: border-box;
    padding: 10px 12px; font: inherit; line-height: 1.5;
    border: 1px solid #b9b2ad; border-radius: 6px;
    resize: vertical;
  }
</style>
<textarea placeholder="Your message"></textarea>

resize: vertical allows height changes only, so a user cannot drag the box wider than the layout. resize: none turns resizing off, but it is usually friendlier to leave some control.

Select

The closed box of a <select> can be styled like an input. The open list of options is drawn by the browser and mostly cannot be styled.

index.html

HTML

<style>
  select { padding: 10px 12px; font: inherit; border: 1px solid #b9b2ad; border-radius: 6px; background: #fff; min-width: 200px; }
</style>
<select><option>Fiction</option><option>Poetry</option><option>Travel</option></select>

A custom arrow

To replace the default arrow, turn off the native look and draw your own with a background image.

index.html

HTML

<style>
  .sel {
    appearance: none; padding: 10px 36px 10px 12px; font: inherit; min-width: 200px;
    border: 1px solid #b9b2ad; border-radius: 6px; background-color: #fff;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" fill="none" stroke="gray" stroke-width="2"/></svg>');
    background-repeat: no-repeat; background-position: right 12px center;
  }
</style>
<select class="sel"><option>Fiction</option><option>Poetry</option></select>

appearance: none removes the browser’s arrow and styling.
Keep the right padding big enough so text does not run under the arrow.

info

Native is often best

Complex custom dropdowns made from divs are usually worse for keyboards and screen readers than a plain <select>. Style the closed box and let the browser handle the list.