Twitter Response: Change select box arrow style with CSS

@porlyp asked on Twitter if it was possible to change the styling of the search scopes drop down menu in SharePoint using just CSS.  Here is a sample of what we are targeting:

Search scope drop down arrow

So I did a little research and this is what I came up with…

Before I talk about a CSS solution, please note that the cleanest way to handle a change like this would be with jQuery/JavaScript. The select menu drop down arrow is created by the browser and will be rendered differently based on your operating system.   Here are some possible jQuery solutions for you to try:

But if you want to use CSS, there is a solution.  Now it may not work in your browser of choice (ahem, ancient IE) so please do complete testing on your site against your browser requirements.

I found this article, Style a Select Box Using Only CSS, and I have retrofitted it to work with SharePoint. I explain each line in the comments but to summarize, what this does is constrain the width of the select box container so the select box arrow is no longer visible.  Then it sets a background image for the container that is the new arrow image, thus giving the illusion of a replaced arrow.

/* Target select box within search table */ select {
		background: transparent; /* Clear out default background color */
		width: 268px; /* Set a fixed width for the select box */

/* Target the select box container - table cell generated by SharePoint */ {
		width: 230px; /* Set the width of the container to a value smaller than what is set for the select box */
		overflow: hidden; /* Hide the extra select box width - thus hiding the default arrow */
		background: url(insert image URL here) no-repeat right #ddd; /* Specify a new arrow image, right align so it appears where your select box arrow normally would be */
		display: block; /* Special sauce that makes this work - needed because container is a table cell */

Please note that the widths may have be to adjusted based on your options in your select box, and this won’t be a good solution if you have a lot of scopes that could appear and any of them have long names.

4 thoughts on “Twitter Response: Change select box arrow style with CSS”

  1. Thanks Heather – helped me out no end! I’m still learning jQuery but we are using a smattering of it already, so it shouldn’t be long before I’ll be checking out / using that approach.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.