How to create a select with images in the options?

Question

How to create a select with images in the options?

Navigation

#1 by (8 votes)
#2 by (7 votes)
#3 by (2 votes)

14

I thought I'd be able to make a simple% s in html with image, but it does not work.

I'm beginning to think that this is a problem for modern browsers or HTML5.

CSS

select#gender option[value="Prima"] {
    background-image: url('../produtos/1.jpg');
}

select#gender option[value="Piana"] {
    background-image: url('../produtos/2.jpg');
}

select#gender option[value="Legno"] {
    background-image: url('../produtos/3.jpg');
    background-color: #cccccc;
}

HTML

<select>
    <option>Prima</option>
    <option>Piana</option>
    <option>Legno1</option>
    <option>Due</option>
    <option>Rustica</option>
    <option>Magna</option>
    <option>Flat</option>
</select>

I also tried straight into select and nothing:

<option style="background-image: url('../produtos/2.jpg');">Prima</option>

How to put image in the select option?

html html5 css

asked by anonymous 16.04.2014 / 21:21

3 answers

8

Can not put ~~images in <select> or~~ in <option> s. You'll need to create your own selector with HTML and JavaScript, or use a prompt such as Select2 .

16.04.2014 / 21:24

7

No <select> is possible for an image, already in <option> only to change the background color:

Example: link

CSS

select
{
    background: url('http://i.imgur.com/XN3hWOM.png');
    width: 98px;
    height: 38px;
}

option:nth-child(odd) /* Se for impar fica com fundo verde */
{
    background: Green;
}
option:nth-child(even) /* Se for par fica com o fundo amarelo */
{
    background: Yellow;
}

The pseudo-class nth-child selects elements from within an element tree if referring to the specific position of each. You can, for example, select odd or even elements.

16.04.2014 / 21:38

Display many elements in the DOM can affect performance? How to disable the scrolling of a web page?

score 2 · Accepted Answer

function CustomSelect() {
    var container = ".custom_select",
        selected_selector = ".custom_select_selected",
        obj = $(container);
    
    if (obj.length) {
        var selected = obj.find(selected_selector);
        var options = obj.find("ul").children();

        $(this).css("z-index", parseInt(999));

        $(selected).click(function() {
            options.parent().toggle();
        });

        $.each(options, function(k1, v1) {
            $(this).click(function() {
                selected.html($(this).html());
                options.parent().toggle();
            });
        });
    }
}

$().ready(function() {
    CustomSelect();
});

@charset "UTF-8";
* {
    margin: 0px auto;
    padding: 0px;
    border: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    color: #000;
    /*font-family:Helvetica, Verdana, Arial, sans-serif;*/
    font-family: 'ヒラギノ角ゴ Pro W6', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    font-weight: normal;
    font-size: 16px;
}

html, body {
    height: 100%;
    text-align: center;
}

body {
    background-color: #fff;
    text-align: center;
}

form {
    margin: 0px;
    display: inline;
}
/* Essa parte de cima é apenas um "reset". Se quiser pode ignorar ou criar o seu próprio */

/* Os estilos do select */
.custom_select_selected {
    color: #333;
    text-decoration: none;
    outline: none;
    display: inline-block;
    padding: 5px;
    font-size: 100%;
    border: 1px solid #333;
    width: 100%;
    cursor: hand;
}

.custom_select_selected:hover,
.custom_select_selected:focus {
    color: #333;
    border: 1px solid #000;
}

.custom_select_options {
    border: 1 px solid #d4ca9a;
    color: #000;
    display: none;
    width: 100%;
    min-width: 140px;
    list-style: none;
}

.custom_select_options li {
    width: 100%;
}

.custom_select_options li a {
    background-color: #ccc;
    width: 100%;
    padding: 5px;
    display: block;
    color: #fff;
}

.custom_select_options li a:hover {
    background-color: #8a3b19;
    color: #fdfa14;
    text-decoration: none;
}

.custom_select {
    width: 150px;
    display: inline-block;
    z-index: 999;
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="custom_select">
    <div class="custom_select_selected">Item B</div>
    <ul class="custom_select_options">
        <li><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
        <li><a href="#">Item C</a></li>
    </ul>
</div>

Options go within every <li></li> .

The above code does not have all the features of <select> , however, you have the basics of displaying options and choosing.

Example, if you want to insert images into "options":

    <li><img src="imagem aqui"></li>
    <li><img src="imagem aqui"></li>

Highlighting again, This only visually simulates a <select> . You can not use it as an element of a <form> form, obviously.

With a simple implementation you can assign the chosen option to a field of type hidden <input type="hidden" ....> .