Scribd
Upload
43 views4 pages

Change Icon Select Defalut

This question asks how to change the default select box arrow in HTML to a custom image. The answers provided CSS solutions to remove the default arrow styling and add a background image for the custom arrow, with some suggestions to make it work cross-browser: 1. Use -webkit-appearance: none; and background properties to add the custom image and style the select box. 2. For IE, also include select::-ms-expand { display: none; } to remove the default arrow. 3. Use background-position: right to position the custom image on the right rather than a hard-coded pixel value for responsiveness.

Uploaded by

amka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views4 pages

Change Icon Select Defalut

This question asks how to change the default select box arrow in HTML to a custom image. The answers provided CSS solutions to remove the default arrow styling and add a background image for the custom arrow, with some suggestions to make it work cross-browser: 1. Use -webkit-appearance: none; and background properties to add the custom image and style the select box. 2. For IE, also include select::-ms-expand { display: none; } to remove the default arrow. 3. Use background-position: right to position the custom image on the right rather than a hard-coded pixel value for responsiveness.

Uploaded by

amka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

How do I change the select box arrow

[duplicate]
Ask Question
Asked 6 years, 4 months ago
Active 3 years, 4 months ago
Viewed 255k times
43
24
This question already has answers here:
Select arrow style change (10 answers)
Closed 5 years ago.
I need your help.

I can't seem to wrap my head around this one and figure it out. How do I change the default Windows 7, IE 10

default arrow in the select box:  to make it look like this, using the custom arrow

below: .

Here is the arrow that I desire to use:

Here is my HTML markup:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
select { font: normal 13px Arial; color: #000;}
.container {
border: 1px solid red;
position: relative; width: 124px; height: 18px; overflow: hidden;
}
.inpSelect {
color: black; background: #ffa;
position: absolute; width: 128px; top: -2px; left: -2px;
}
</style>

<script type="text/javascript">
</script>

</head>

<body>

<div class="container">
<select class="inpSelect" name="xxx">
<option value="0" selected="selected">actual browser</option>
<option value="1">IE</option>
<option value="2">Firefox</option>
<option value="3">Opera</option>
<option value="4">Safari</option>
</select>
</div>
</body>

</html>
html css select

share  improve this question  follow 


edited Mar 3 '14 at 22:33
Jatin
2,90566 gold badges2424 silver badges4242 bronze badges
asked Mar 3 '14 at 17:19

Jason Kelly
2,09177 gold badges2929 silver badges6666 bronze badges
 1
Fixed width option tag inside a fixed width wrapper element, with background-image on the wrapper element,
use background-transparent on the select tag, and also use overflow: hidden; on the parent element, there you
go, done... – Mr. Alien Mar 3 '14 at 17:21
 2
Why do you need to do this? Just for pixel perfect in all browsers?? – epascarello Mar 3 '14 at 17:27 
add a comment
3 Answers

ActiveOldestVotes
64
You can skip the container or background image with pure css arrow:

select {

/* make arrow and background */

background:
linear-gradient(45deg, transparent 50%, blue 50%),
linear-gradient(135deg, blue 50%, transparent 50%),
linear-gradient(to right, skyblue, skyblue);
background-position:
calc(100% - 21px) calc(1em + 2px),
calc(100% - 16px) calc(1em + 2px),
100% 0;
background-size:
5px 5px,
5px 5px,
2.5em 2.5em;
background-repeat: no-repeat;

/* styling and reset */

border: thin solid blue;


font: 300 1em/100% "Helvetica Neue", Arial, sans-serif;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;

/* reset */

border-radius: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance:none;
-moz-appearance:none;
}
Sample here
share  improve this answer  follow 
edited Nov 18 '15 at 11:42
ozil
5,48355 gold badges2323 silver badges4848 bronze badges
answered Feb 2 '15 at 9:16

Veiko Jääger
3,6322222 silver badges1717 bronze badges
 6
Doesn't work in IE since it relies on -webkit-appearance and -mox-appearance. Although it sounds like Edge does
support it "Microsoft Edge and IE Mobile support this property with the -webkit- prefix, rather than -ms- for interop
reasons." - caniuse.com although that may be remedied by using "select::-ms-expand { display: none; }" – Mark
Boltuc Jan 21 '16 at 15:19 
 Great! I also found it useful to give the select box a padding-right that is the same value as the 2.5em
background-size; for small boxes or options with lots of text, the text then goes behind the "button" instead of on top of
it. – Anthony F. May 17 '16 at 19:36 
 Thanks @MarkBoltuc for the tip. select::-ms-expand { display: none; } helped with Edge. – somecallitbluesOct 24
'16 at 23:19
 Thanks ..!! so useful – hussain Apr 28 '17 at 9:06
 how can i remove the white backround from the arrow(in mozilla) and not the entire arrow – Faizal HussainJun
28 '18 at 7:38
add a comment
34
Working with just one selector:

select {
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 244px;
}
fiddler
share  improve this answer  follow 
edited Feb 28 '17 at 23:26
answered Dec 24 '14 at 20:15

Julio Marins
6,90355 gold badges3333 silver badges4545 bronze badges
 8
This appears to only work in Chrome. In Firefox it doesn't work at all, and in IE it gives a mixed result. – Taylor Apr 6 '15
at 20:28
 1
you did not use a class – quemeful Jan 30 '17 at 18:48
 2
@Taylor just add select::-ms-expand { display: none; } in IE – crh225 Feb 27 '17 at 22:27
 1
Taylor you should use: -moz-appearance:none; in order to work under firefox... actually the solution above is far less
complicated and easier to maintain! – obinoob Aug 15 '17 at 13:59 
 2
A small improvement to your code change ` background-position-x: 244px;` to ` background-position: right;` to make it
responsive – Connor Jan 22 '19 at 17:43
add a comment
15
CSS

select.inpSelect {
//Remove original arrows
-webkit-appearance: none;
//Use png at assets/selectArrow.png for the arrow on the right
//Set the background color to a BadAss Green color
background: url(assets/selectArrow.png) no-repeat right #BADA55;
}
share  improve this answer  follow 
answered Dec 12 '14 at 19:46

Seth McClaine
5,45922 gold badges2727 silver badges5151 bronze badges
add a comment
Not the answer you're looking for? Browse other questions tagged html css select or ask your own question.

You might also like