0

html:

<div class="select-input">
     <select>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>           
     </select>  
 </div>

css:

.select-input{
    width:180px;  
    padding:5px;
    font-family: "Helvetica-Light";
    font-size: 9pt;
    color:#2a2a2a;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -o-appearance: none;
    background: #ffffff url(".../images/select-arrow.png") no-repeat;
    background-position:143px center;
    overflow:hidden;

}
 .select-input{
 border-style:solid;
    border-width:thin; 
    border-color: #DDDDDD;
    margin-top:5px;
}

see my demo in fiddle

I customized the arrow of drop down box and it is working good in Chrome,FF,Opera like in screenshot but not working in ie9 and ie8.In ie9 and ie8 i am getting the output like in fiddle so how to customize that look like in FF & Chrome.

screenshot

Last Update:working demo

user2725407
  • 400
  • 1
  • 4
  • 16
  • Why do you have three dots in `url(".../images/select-arrow.png") no-repeat;`? – Atle Oct 15 '13 at 15:21
  • 2
    so, where is the working code that reproduces the actual issue? – Giovanni Silveira Oct 15 '13 at 15:23
  • 1
    The arrow image is throwing a 404, hard to check without the image – grimmus Oct 15 '13 at 15:23
  • 1
    Select boxes are *extremely* difficult to style in old IE versions (and in some respects, impossible). If you really need to do this, you probably need to completely replace the select box with a custom-written JS control. – Spudley Oct 15 '13 at 15:33
  • That new fiddle still looks nothing like the screenshot in Firefox, Opera or Chrome – there is just a normal select field (including its default drop-down-arrow), then some space next to it and then the image, all within a border. – CBroe Oct 15 '13 at 15:42
  • I dont see any styling on the ` – Giovanni Silveira Oct 15 '13 at 15:52
  • @CBroe I don't know how to include the image in fiddle.The css what i mentioned is used.You can see the demo site from here http://54.227.255.162/user :username:testing & password : testing123 – user2725407 Oct 15 '13 at 16:04
  • @CBroe Please see my last update. – user2725407 Oct 15 '13 at 16:15
  • @GiovanniSilveira Please see my last update for working demo. – user2725407 Oct 15 '13 at 16:17
  • @grimmus Please see my last update for working demo. – user2725407 Oct 15 '13 at 16:18

2 Answers2

0

Well, in order to style those in IE, you might need to get the actual <select> to be wider than the <div> you have. What you are looking for is probably something like this: http://jsfiddle.net/qhCsJ/2187/

Giovanni Silveira
  • 1,281
  • 8
  • 7
-1

It looks like the appearance property is not supported in Internet Explorer- this is the problem.

There's a pseudo-element for the dropdown arrow on IE. Try adding this CSS (customized for your page).

.select-control::-ms-expand {
    display: none;
}
cardern
  • 715
  • 5
  • 18
  • You can see the demo site from here 54.227.255.162/user :username:testing & password : testing123 to look the required arrow. – user2725407 Oct 15 '13 at 16:08
  • Try adding this to your css to make it work for internet explorer: `overflow:hidden;` – cardern Oct 15 '13 at 16:21
  • Did you customize it to your page? I updated again based on what I think should work... you might need to mess around with it though. – cardern Oct 15 '13 at 16:45
  • After looking again, I don't think that it is possible with CSS only. Take a look at this answer: http://stackoverflow.com/questions/10862050/remove-drop-down-arrow-from-select-element – cardern Oct 15 '13 at 17:08