Member Avatar for steven_s-h

I want to change the color of a selection object in an HTML form (ie a <SELECT> object). I have used CSS to get all my textfields looking nice, but I can't see how to change the border, or the little arrow on the selection box.
I think that it should be similar to changing the scrollbar in IE.

  • 3 Contributors
  • 5 Replies
  • 141 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by rixius

Dani AI

Generated

In 2004 the native select arrow and framing were mostly browser-controlled, so was correct for that era. Modern browsers let you remove the native "chrome" and draw your own arrow and border in many cases — use appearance: none (with vendor prefixes), hide IE/Edge's built-in expand control, then supply a background image or an absolutely positioned arrow. See MDN: appearance for details.

A compact, practical pattern:

select.custom {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff url("arrow.png") no-repeat right 10px;
  border: 1px solid #999;
  padding: 8px 36px 8px 10px; /* room for the arrow */
  background-size: 12px;
}
select.custom::-ms-expand { display: none; } /* hide IE/Edge arrow */
select.custom:focus { box-shadow: 0 0 0 3px rgba(0,123,255,0.15); outline: none; }

Notes and pitfalls: ::-ms-expand is needed for older IE/Edge (see ). Some mobile browsers (iOS Safari, Android System UI) still apply native styling you can't fully override. When removing native affordances, preserve keyboard and screen‑reader behaviour — do not replace a real <select> with a purely visual element unless you reimplement proper ARIA roles and keyboard handling. For pixel-perfect, cross-platform dropdowns consider a well-maintained JS replacement (Select2/Choices/Tom Select), but only after weighing accessibility and maintenance costs. This approach addresses 's "big ugly boxes" while keeping 's JavaScript fallback in mind for cases where CSS alone can't reach the desired look.

Recommended Answers

All 5 Replies

Member Avatar for zenfulcreations

To my knowlege, it's not possible to change anything but the color in the OPTION objects - only the color of the boxes, but not the arrows.

Member Avatar for steven_s-h

To my knowlege, it's not possible to change anything but the color in the OPTION objects - only the color of the boxes, but not the arrows.

Thanks.
I think that they need to add this capability to the CSS specification - it throws the whole design of my webpage having big ugly boxes all over the place!

Member Avatar for rixius

Are you speaking of the combo boxes? If so I believe those, and radio buttons and checkboxes can be modified to images via javascript if I am not mistaken.

I can't remember the site I read about it at... it started with a D, I will look for it.

Member Avatar for steven_s-h

Are you speaking of the combo boxes? If so I believe those, and radio buttons and checkboxes can be modified to images via javascript if I am not mistaken.

I can't remember the site I read about it at... it started with a D, I will look for it.

yes, its a combobox. I hadn't thought of using javascript. I'll look into it.
thanks!

Member Avatar for rixius

Yep! and if all else fails, it can probably be done easily in flash, too. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.