How to hide/remove select default arrow for custom arrow

Question

I would like to know how do I remove or hide the default arrow on my select dropdown.

I do not wish to use javascript/jquery for this, and I dont mind how it degrades in earlier versions of IE either, but I dont know why its not being hidden/removed at all.

FYI: I am using an online source for the custom arrow for example purposes here.

Any help will be appreciated. thanks.

/* -- Styled Selects - wrapped due to FF appearance bug & MSIE -- */

.styled_select {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 200px;
  height: auto;
  border: 1px solid #ccc;
  overflow: hidden;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -khtml-box-shadow: none;
  box-shadow: none;
}
.styled_select.match-width {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
.styled_select {} .styled_select select {
  position: relative;
  display: block;
  margin: 0;
  padding: 9px 32px 9px 12px;
  white-space: nowrap;
  width: 100%;
  font-size: 13px;
  font-size: 1.3rem;
  color: #666666;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-style: normal;
  border: none;
  background: transparent;
  cursor: pointer;
  -moz-appearance: window;
  -webkit-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;
  z-index: 2;
}
.styled_select select::-ms-expand {
  display: none;
  z-index: -999999;
}
.styled_select:hover {
  border: 1px solid #00adf1;
}
.styled_select:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  speak: none;
  content: '';
  z-index: 1;
}
.styled_select:before {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 20px;
  margin: -8px 0 0 -4px;
  background: url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png) no-repeat 50% 60%;
  speak: none;
  content: '';
}
.ie8 .styled_select select,
.ie9 .styled_select select {
  padding-right: 12px;
}
.ie8 .styled_select:after,
.ie9 .styled_select:after,
.ie8 .styled_select:before,
.ie9 .styled_select:before {
  display: none;
}

<span class="styled_select">
          <select>
                <option value="">Select One</option>
                <option value="1">Option 01</option>
                <option value="2">Option 02</option>
          </select>
</span>

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

If you're talking about hiding the native arrow in IE8 then it's not possible. In IE9 you can just simply cover it up as outlined here: How to hide drop down arrow in IE8 & IE9?.

On more modern browsers:

-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;

should work just fine, but only for the browsers that support it: http://caniuse.com/#feat=css-appearance

However, as others have noted, you have a custom arrow in the pseudo element ::before. If you're talking about this arrow then just remove said pseudo element.

edited May 23 '17 at 12:24

Community

1
1

answered May 29 '16 at 06:21

Kevin

367
1
8

I want my custom arrow, not the default arrow – Krys May 29 '16 at 06:27
@Krystyna, in which browsers are you still seeing the default arrow? – Kevin May 29 '16 at 06:28
@Krystyna Can you try changing `-moz-appearance: window;` to `-moz-appearance: none;`? Though that being said, `-moz-appearance: window;` seems to be working fine in Firefox 46.0.1 with hiding the arrow. – Kevin May 29 '16 at 06:33
Yes, I changed that and now it works in firefox, however in IE9 how do I degrade it? in IE9 at the moment it has the default sitting on top of the custom arrow – Krys May 29 '16 at 06:35
As noted in http://stackoverflow.com/questions/19407332/how-to-hide-drop-down-arrow-in-ie8-ie9, the only way to hide it in IE9 is to cover it up. But with that comes bad usability as you can no longer trigger the dropdown by clicking on the arrow since it's on drop of the select. – Kevin May 29 '16 at 06:41
hmm, right, okay. I really dont want to have to resort to jquery for customizing the select, but I dont see any other option.. – Krys May 29 '16 at 06:43

T J · Answer 2 · 2016-05-29T06:59:34.257

It's the ::before pseudo element. Just remove it from your CSS:

.styled_select:before {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 20px;
  margin: -8px 0 0 -4px;
  background: url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png) no-repeat 50% 60%;
  speak: none;
  content: '';
}

/* -- Styled Selects - wrapped due to FF appearance bug & MSIE -- */

.styled_select {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 200px;
  height: auto;
  border: 1px solid #ccc;
  overflow: hidden;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -khtml-box-shadow: none;
  box-shadow: none;
}
.styled_select.match-width {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
.styled_select {} .styled_select select {
  position: relative;
  display: block;
  margin: 0;
  padding: 9px 32px 9px 12px;
  white-space: nowrap;
  width: 100%;
  font-size: 13px;
  font-size: 1.3rem;
  color: #666666;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-style: normal;
  border: none;
  background: transparent;
  cursor: pointer;
  -moz-appearance: window;
  -webkit-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;
  z-index: 2;
}
.styled_select select::-ms-expand {
  display: none;
  z-index: -999999;
}
.styled_select:hover {
  border: 1px solid #00adf1;
}
.styled_select:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  speak: none;
  content: '';
  z-index: 1;
}
.ie8 .styled_select select,
.ie9 .styled_select select {
  padding-right: 12px;
}
.ie8 .styled_select:after,
.ie9 .styled_select:after,
.ie8 .styled_select:before,
.ie9 .styled_select:before {
  display: none;
}

<span class="styled_select">
          <select>
                <option value="">Select One</option>
                <option value="1">Option 01</option>
                <option value="2">Option 02</option>
          </select>
</span>

@Krystyna just delete the above CSS rule from your code and arrow will be gone. — T J, May 29 '16 at 06:21
I removed the `:before` pseudo element, is this what you meant? If so, it removes the entire select box, nothing is there... — Krys, May 29 '16 at 06:23
@Krystyna no it doesn't. See the demo in answer. You probably messed up something else. — T J, May 29 '16 at 07:00
err, I meant removing the default arrow, not my custom arrow — Krys, May 29 '16 at 07:03
@Krystyna I don't see any default arrow..! Maybe you should specify the browser version etc you're using..! — T J, May 29 '16 at 07:05

score 0 · Answer 3 · answered May 29 '16 at 06:19

0

Makes the dropdown width exceed it's wrapper width.. And add overflow hidden to the dropdown wrapper.. Example:

.dropdown {
width: 220px;
}
.dropdown-wrapper {
width: 200px;
overflow: hidden;
}

answered May 29 '16 at 06:19

robit muzaki

48
2

I dont like this, because I want the width of the dropdown list to be the same as the select box – Krys May 29 '16 at 06:26

How to hide/remove select default arrow for custom arrow

3 Answers3