Select Box Arrow Style

Select box arrow style

Browsers and OS's determine the style of the select boxes in most cases, and it's next to impossible to alter them with CSS alone. You'll have to look into replacement methods. The main trick is to apply appearance: none which lets you override some of the styling.

My favourite method is this one:

http://cssdeck.com/item/265/styling-select-box-with-css3

It doesn't replace the OS select menu UI element so all the problems related to doing that are non-existant (not being able to break out of the browser window with a long list being the main one).

Good luck :)

Select arrow style change

Have you tried something like this:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Haven't tested, but should work.

EDIT: It looks like Firefox doesn't support this feature up until version 35 (read more here)

There is a workaround here, take a look at jsfiddle on that post.

Styling arrow in Select Box

The reason why you're not seeing the arrow color change is that the arrow icon is not a children or next sibling of select element and there's no CSS selector for previous/ parent element. The way I see it you have two options there:

1) Move you arrow icon after select:

          <select name="options" required>
             <option value="" disabled selected>Select an 
             option</option>
             <option value="1">yes</option>
             <option value="2">no</option>
          </select>
          <span class="select-arrow fa fa-caret-down" style="font- 
      size: 1.5em;"></span>

Which should you allow to use + (next sibling) selector

select:focus + .select arrow { color: #42AC82 }

2) Use JS to detect select element focus and toggle class select-container element what would allow you to style all child elements as you need

css for select box arrow

The best solution here is to put a background-image to the select like this:

.custom-search-selector{
   background: url(http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-
   arrow-up-b-128.png) no-repeat right;
    background-size: 16%; 
} 

.form-item-custom-search-types select {  appearance: none;  -moz-appearance: none;  -webkit-appearance: none;}/* added */.custom-search-selector{       background: url(http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png) no-repeat right;        background-size: 16%;     } 

<div class="form-item form-type-select form-item-custom-search-types">  <label class="element-invisible" for="edit-custom-search-types">Search for </label>  <select class="custom-search-selector custom-search-types form-select" id="edit-custom-search-types" name="custom_search_types"><option value="c-all" selected="selected">All</option><option value="c-announcement">Announcements</option><option value="c-article">Articles</option><option value="c-blog">Blogs</option><option value="c-forum">Forums</option><option value="c-gallery">Galleries</option><option value="c-Documents">Documents</option></select>

---

Related Topics