1

I have done what is answered in this question but I haven't had luck so far in Google Chrome.

The code below works just fine in Firefox though:

select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  text-indent: 0.01px;
  text-overflow: ""; 
}

option {
    background: transparent        url(http://www.clinicalflow.com/skins/common/icons/ed_ins_img.png)     no-repeat left center;
    padding-left: 20px;  
    width: 200px;
}

Any hints?

Here is the fiddle I have been playing with.

Community
  • 1
  • 1
jmic
  • 907
  • 2
  • 10
  • 22

2 Answers2

2

Should be like this:

option {
    background: transparent url(http://www.clinicalflow.com/skins/common/icons/ed_ins_img.png) no-repeat left center;
    padding-left: 20px;  
    width: 200px;
}

You were using semicolon just after the background: transparent; and after that url which is wrong.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • Heh, you beat me to it by a second – Stephan Muller Sep 09 '14 at 11:15
  • Sorry, that was a typo I made when pasting the code in SO. If you check out the fiddle it is just the way you wrote it. – jmic Sep 09 '14 at 11:16
  • There in the fiddle also, you are using `;` after transparent. – Bhojendra Rauniyar Sep 09 '14 at 11:16
  • Sorry again. That was a edit in the fiddle. Will check out everything in the future before asking again in SO. If you try the current linked edition is just the way you wrote it in the first place. – jmic Sep 09 '14 at 11:19
  • Oh! I checked your updated fiddle and tried to set in select which is working fine but not with option, I think not possible, or need some re-search... http://jsfiddle.net/pm86r8bm/4/ – Bhojendra Rauniyar Sep 09 '14 at 11:26
  • Look here, we can't do simply but can do with bootstrap, please research there http://stackoverflow.com/questions/5887133/cssselect-dropdown-option – Bhojendra Rauniyar Sep 09 '14 at 11:28
  • Thanks for following up! Will keep the question open and see if there is another option for this, though. – jmic Sep 09 '14 at 11:29
  • You should at least believe by seeing the most upvoted question answer.... that there no other way around... – Bhojendra Rauniyar Sep 09 '14 at 11:30
1

I have a solution for all browsers jsfiddle.net/8FydL/445

about options with background-image.

This is a known solution and helps me many many times. The solution came from here:

CSS:

.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}

.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url('http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
                border:1px solid #d4ca9a; width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                  left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}

.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}

JS: 

 $(".dropdown img.flag").addClass("flagvisibility");
    $(".dropdown dt a").click(function() {
        $(".dropdown dd ul").toggle();
    });

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        $(".dropdown dt a span").html(text);
        $(".dropdown dd ul").hide();
        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });

    $(".dropdown img.flag").toggleClass("flagvisibility");

and Demo Html:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <dl id="sample" class="dropdown">
        <dt><a href="#"><span>Please select the country</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/br.png" alt="" /><span class="value">BR</span></a></li>
                <li><a href="#">France<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/fr.png" alt="" /><span class="value">FR</span></a></li>

            </ul>
        </dd>
    </dl>
    <span id="result"></span>

Hope, that will save your day :) !

Giannis Grivas
  • 3,374
  • 1
  • 18
  • 38