24

Achei que saberia fazer um select simples em html com imagem, porém não funciona.

Começo a achar que seja problema dos browsers modernos ou do 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>

Tentei também direto no option e nada:

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

Como colocar imagem no option do select?, sendo um ícone a esquerda da opção.

2
  • 1
    Faltou explicar como seria essa imagem: um ícone à esquerda e um texto à direita, um fundo cobrindo todo o option etc...
    – Meu ovo
    31/01/2020 às 14:14
  • 1
    Realmente faltou, adicionei agora, seria um icone a esquerda mesmo.
    – Dorathoto
    31/01/2020 às 16:38

7 Respostas 7

10
+50

Como já dito, o option é um elemento que não aceita imagens. Desenvolvi um código em jQuery com CSS onde você pode substituir o select por uma lista HTML que irá simular o select.

O código esconde o select e cria no lugar dele o HTML com a lista simulando as opções, onde você pode colocar uma imagem ao lado do texto.

Funciona da seguinte forma:

Adicione no select a classe .fake-sel:

<select class="fake-sel">
    <option>Prima</option>
    <option>Piana</option>
    <option>Legno1 foo foo</option>
</select>

O JavaScript irá identificar o select por essa classe e no lugar dele construir o HTML. O código que desenvolvi pode ser usado em mais de um select, basta adicionar a classe nos selects que você quer customizar com imagens nas opções.

Você verá no código uma array desta forma:

var imgs_ = [
   [
      'https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg',
      'https://oc2.ocstatic.com/images/logo_small.png',
      'https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg'
   ]
];

Note que essa array imgs_ possui outra array onde em cada posição possui um caminho para as imagens. Você só precisa colocar em cada posição o caminho das imagens relativa àquela opção. Por exemplo, se for usar mais de um select, ficaria assim:

<select class="fake-sel">
    <option>Prima</option>
    <option>Piana</option>
    <option>Legno1 foo foo</option>
</select>
<select class="fake-sel">
    <option>Opção 1</option>
    <option>Opção 2</option>
</select>

E a array assim:

var imgs_ = [
   [
      'https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg',
      'https://oc2.ocstatic.com/images/logo_small.png',
      'https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg'
   ],
   [
      'https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg',
      'https://oc2.ocstatic.com/images/logo_small.png'
   ]
];

Repare que a array possui duas sub-arrays, onde cada uma refere-se a um select na ordem, e o segundo select possui duas opções, logo, a segunda array terá dois itens com os caminhos das imagens.

Resumindo, basta adicionar a classe .fake-sel no select que você quer alterar e ajustar a array imgs_ como explicado acima, e adicionar o script abaixo:

<script>
$(function(){

   var sels = $(".fake-sel");

   var imgs_ = [
      [
         'https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg',
         'https://oc2.ocstatic.com/images/logo_small.png',
         'https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg'
      ]
   ];

   sels.each(function(x){

      var $t = $(this);

      var opts_ = '', first;

      $t.find("option").each(function(i){

         if(i == 0){
            first = "<li><img src='"+ imgs_[x][i] +"'>"+ $(this).text() +"</li>";
         }
         opts_ += "<li"+ (i == 0 ? " class='ativo'" : '') +"><img src='"+ imgs_[x][i] +"'>"+ $(this).text() +"</li>";
      });

      $t
      .wrap("<div class='fake-sel-wrap'></div>")
      .hide()
      .parent()
      .css("width", $t.outerWidth()+60)
      .append("<ul>"+ first+opts_ +"</ul>")
      .find("ul")
      .on("click", function(e){
         e.stopPropagation();
         $(this).toggleClass("ativo");
      })
      .find("li:not(:first)")
      .on("click", function(){
         $(this)
         .addClass("ativo")
         .siblings()
         .removeClass("ativo")
         .parent()
         .find("li:first")
         .html($(this).html());

         $t.val($(this).text());

      });
   });

   $(document).on("click", function(){
      $(".fake-sel-wrap ul").removeClass("ativo");
   });

});
</script>

Em relação ao tamanho das imagens e outras alterações (cores etc.) irei explicar mais abaixo. Por enquanto veja o código em funcionamento com apenas 1 select:

$(function(){
   
   var sels = $(".fake-sel");
   
   var imgs_ = [
      [
         'https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg',
         'https://oc2.ocstatic.com/images/logo_small.png',
         'https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg'
      ]
   ];

   sels.each(function(x){
      
      var $t = $(this);
      
      var opts_ = '', first;
      
      $t.find("option").each(function(i){
         
         if(i == 0){
            first = "<li><img src='"+ imgs_[x][i] +"'>"+ $(this).text() +"</li>";
         }
         opts_ += "<li"+ (i == 0 ? " class='ativo'" : '') +"><img src='"+ imgs_[x][i] +"'>"+ $(this).text() +"</li>";
      });

      $t
      .wrap("<div class='fake-sel-wrap'></div>")
      .parent()
      .css("width", $t.outerWidth()+60)
      .append("<ul>"+ first+opts_ +"</ul>")
      .find("ul")
      .on("click", function(e){
         e.stopPropagation();
         $(".fake-sel-wrap ul")
         .not(this)
         .removeClass("ativo");
         $(this).toggleClass("ativo");
      })
      .find("li:not(:first)")
      .on("click", function(){
         $(this)
         .addClass("ativo")
         .siblings()
         .removeClass("ativo")
         .parent()
         .find("li:first")
         .html($(this).html());
         
         $t.val($(this).text());
         
      });
   });
   
   $(document).on("click", function(){
      $(".fake-sel-wrap ul").removeClass("ativo");
   });
   
});
.fake-sel{
   display: none;
}

.fake-sel-wrap{
   display: inline-block;
   position: relative;
   height: 46px;
}

.fake-sel-wrap ul{
   margin: 0;
   padding: 0;
   list-style: none;
   border: 1px solid #ddd;
   position: absolute;
   top: 0;
   left: 0;
   font-family: Arial;
   font-size: 14px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   cursor: default;
   background-color: white;
}

.fake-sel-wrap ul li{
   padding: 3px;
   line-height: 1em;
   display: flex;
   align-items: center;
}


.fake-sel-wrap ul li:nth-child(1){
   border-bottom: 1px solid #ddd;
}

.fake-sel-wrap ul li.ativo{
   background-color: blue;
   color: white;
}

.fake-sel-wrap ul li:not(:nth-child(1)):not(.ativo):hover{
   background-color: #ddd;
}


.fake-sel-wrap ul.ativo{
   overflow: auto;
   height: auto;
}

.fake-sel-wrap ul li img{
   width: 40px;
   height: 40px;
   margin-right: 10px;
}

/* ESTE É O CSS DA SETINHA */
.fake-sel-wrap ul li:nth-child(1)::after{
   content: '';
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 6px 5px 0 5px;
   border-color: #000000 transparent transparent transparent;
   margin-left: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="fake-sel">
    <option>Prima</option>
    <option>Piana</option>
    <option>Legno1 foo foo</option>
</select>

Quando você clica numa opção, o select escondido é alterado também de acordo com a opção clicada, portanto, você pode enviar pelo formulário tranquilamente, basta colocar um name:

<select class="fake-sel" name="coloque um nome">
    <option>Prima</option>
    <option>Piana</option>
    <option>Legno1 foo foo</option>
</select>

Em relação ao tamanho das imagens, veja que coloquei um tamanho quadrado de 40x40 pixels. Você pode usar o tamanho que quiser, basta fazer alguns ajustes no CSS e numa parte do script.

No CSS:

.fake-sel-wrap{
   display: inline-block;
   position: relative;
   height: 46px;
}

Onde tem height: 46px; acima, é a soma da altura da imagem +6 pixels referente ao padding de 3px acima a abaixo da <li>. Se você for usar uma imagem de 20px de altura, por exemplo, troque o 46px por 26px.

Aqui são definidas as dimensões da imagem:

.fake-sel-wrap ul li img{
   width: 40px;
   height: 40px;
   margin-right: 10px;
}

Se quiser outro tamanho, basta trocar o width e o height (sem esquecer de ajustar o height da classe .fake-sel-wrap como explicado anteriormente).

No JS:

No script, você só irá ajustar um valor de acordo com o tamanho da imagem que definir no CSS, nesta parte:

.css("width", $t.outerWidth()+60)

Onde tem 60, refere-se a largura da imagem +20 pixels, ou seja, se você for usar uma imagem de 20px, basta trocar o 60 por 40.

Veja um exemplo agora com 2 selects:

$(function(){
   
   var sels = $(".fake-sel");
   
   var imgs_ = [
      [
         'https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg',
         'https://oc2.ocstatic.com/images/logo_small.png',
         'https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg'
      ],
      [
         'https://oc2.ocstatic.com/images/logo_small.png',
         'https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg'
      ]
   ];

   sels.each(function(x){
      
      var $t = $(this);
      
      var opts_ = '', first;
      
      $t.find("option").each(function(i){
         
         if(i == 0){
            first = "<li><img src='"+ imgs_[x][i] +"'>"+ $(this).text() +"</li>";
         }
         opts_ += "<li"+ (i == 0 ? " class='ativo'" : '') +"><img src='"+ imgs_[x][i] +"'>"+ $(this).text() +"</li>";
      });

      $t
      .wrap("<div class='fake-sel-wrap'></div>")
      .parent()
      .css("width", $t.outerWidth()+60)
      .append("<ul>"+ first+opts_ +"</ul>")
      .find("ul")
      .on("click", function(e){
         e.stopPropagation();
         $(".fake-sel-wrap ul")
         .not(this)
         .removeClass("ativo");
         $(this).toggleClass("ativo");
      })
      .find("li:not(:first)")
      .on("click", function(){
         $(this)
         .addClass("ativo")
         .siblings()
         .removeClass("ativo")
         .parent()
         .find("li:first")
         .html($(this).html());
         
         $t.val($(this).text());
         
      });
   });
   
   $(document).on("click", function(){
      $(".fake-sel-wrap ul").removeClass("ativo");
   });
   
});
.fake-sel{
   display: none;
}

.fake-sel-wrap{
   display: inline-block;
   position: relative;
   height: 46px;
}

.fake-sel-wrap ul{
   margin: 0;
   padding: 0;
   list-style: none;
   border: 1px solid #ddd;
   position: absolute;
   top: 0;
   left: 0;
   font-family: Arial;
   font-size: 14px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   cursor: default;
   background-color: white;
}

.fake-sel-wrap ul li{
   padding: 3px;
   line-height: 1em;
   display: flex;
   align-items: center;
}


.fake-sel-wrap ul li:nth-child(1){
   border-bottom: 1px solid #ddd;
}

.fake-sel-wrap ul li.ativo{
   background-color: blue;
   color: white;
}

.fake-sel-wrap ul li:not(:nth-child(1)):not(.ativo):hover{
   background-color: #ddd;
}


.fake-sel-wrap ul.ativo{
   overflow: auto;
   height: auto;
}

.fake-sel-wrap ul li img{
   width: 40px;
   height: 40px;
   margin-right: 10px;
}

/* ESTE É O CSS DA SETINHA */
.fake-sel-wrap ul li:nth-child(1)::after{
   content: '';
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 6px 5px 0 5px;
   border-color: #000000 transparent transparent transparent;
   margin-left: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="fake-sel">
    <option>Prima</option>
    <option>Piana</option>
    <option>Legno1 foo foo</option>
</select>
<select class="fake-sel">
    <option>Piana</option>
    <option>Legno1 foo foo</option>
</select>

2
  • Olá, boa tarde, seu código ficou sensacional, como posso "alimentar" o array que possui as imagens para uma vindas do MySQL e mostrando os mesmos no select? 22/05/2020 às 17:10
  • 1
    Olá! Acho usando Ajax ou inserindo o código PHP (se usa PHP) direto no JS, fazendo um loop e alimentando o array.
    – Meu ovo
    23/05/2020 às 18:55
9

No <select> é possível por uma imagem, já no <option> só da pra mudar a cor do background:

inserir a descrição da imagem aqui

Exemplo: http://jsfiddle.net/RL73e/

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;
}

A pseudo-classe nth-child seleciona elementos dentre uma árvore de elementos se referindo a posição específica de cada um. Você pode por exemplo selecionar os elementos ímpares ou pares.

3
  • 2
    Não tenho certeza quando à imagem no select, mas a cor de fundo nos options certamente depende do browser.
    – bfavaretto
    16/04/2014 às 19:44
  • 1
    @bfavaretto No principais funcionam inclusive no IE.
    – Laerte
    16/04/2014 às 19:46
  • 2
    No Mac, funciona a imagem nos 3 principais browsers (Safari, Chrome, Firefox), mas as cores só no Firefox.
    – bfavaretto
    16/04/2014 às 19:48
9

Não é possível colocar imagens no <select> ou nas <option>s. Você vai precisar criar seu próprio seletor com HTML e JavaScript, ou usar um pronto, como o Select2.

5

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, 'MS Pゴシック', 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>

<div class="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>

As opções vão dentro de cada <li></li>.

O código acima não possui todas as funcionalidades do <select>, porém, tem o básico que é exibir as opções e escolher.

Exemplo, caso queira inserir imagens nos "options":

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

Salientando novamente, Isso apenas simula visualmente um <select>. Não poderá usá-lo como um elemento de um formulário <form>, obviamente.

Com uma simples implementação poderá atribuir a opção escolhida a um campo do tipo hidden <input type="hidden" ....>.

4

Um jeito muito mais simples seria utilizar a Biblioteca do jQuery:

$(function () {
  $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function( ul, item ) {
      var li = $( "<li>" ),
          wrapper = $( "<div>", { text: item.label } );

      if ( item.disabled ) {
        li.addClass( "ui-state-disabled" );
      }

      $( "<span>", {
        style: item.element.attr( "data-style" ),
        "class": "ui-icon " + item.element.attr( "data-class" )
      }).appendTo( wrapper );

      return li.append( wrapper ).appendTo( ul );
    }
  });

  $("#CarId2")
  .iconselectmenu()
  .iconselectmenu( "menuWidget")
  .addClass( "ui-menu-icons avatar" );
});
/* select with CSS avatar icons */
option.avatar {
  background-repeat: no-repeat !important;
  padding-left: 20px;
}
.avatar .ui-icon {
  background-position: left top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<select name="CarId2" id="CarId2">
    <option value="volvo" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option>
    <option value="bmw" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">Tauren Mills</option>
    <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">Jane Doe</option>
</select>

2
  • 1
    muito legal, pena que ao selecionar não fica exibindo a imagem...mas muito bacana...gostei
    – Dorathoto
    31/01/2020 às 16:37
  • 1
    Apesar de não ficar selecionado a opção essa aqui é a versão mais simples !!
    – Dorathoto
    6/02/2020 às 11:55
0

Você pode usar o plugin kendoui Combobox https://demos.telerik.com/kendo-ui/combobox/template

                $(document).ready(function() {
                    $("#customers").kendoComboBox({
                        filter:"startswith",
                        dataTextField: "ContactName",
                        dataValueField: "CustomerID",
                        headerTemplate: '<div class="dropdown-header k-widget k-header">' +
                                '<span>Photo</span>' +
                                '<span>Contact info</span>' +
                            '</div>',
                        footerTemplate: 'Total #: instance.dataSource.total() # items found',
                        template: '<span class="k-state-default" style="background-image: url(\'../content/web/Customers/#:data.CustomerID#.jpg\')"></span>' +
                                  '<span class="k-state-default"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>',
                        dataSource: {
                            transport: {
                                read: {
                                    dataType: "jsonp",
                                    url: "https://demos.telerik.com/kendo-ui/service/Customers"
                                }
                            }
                        },
                        height: 400
                    });
                });
                .dropdown-header {
                    border-width: 0 0 1px 0;
                    text-transform: uppercase;
                }

                .dropdown-header > span {
                    display: inline-block;
                    padding: 10px;
                }

                .dropdown-header > span:first-child {
                    width: 50px;
                }

                .k-list-container > .k-footer {
                    padding: 10px;
                }

                #customers-list .k-item {
                    line-height: 1em;
                    min-width: 300px;
                }

                /* Material Theme padding adjustment*/

                .k-material #customers-list .k-item,
                .k-material #customers-list .k-item.k-state-hover,
                .k-materialblack #customers-list .k-item,
                .k-materialblack #customers-list .k-item.k-state-hover {
                    padding-left: 5px;
                    border-left: 0;
                }

                #customers-list .k-item > span {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    display: inline-block;
                    vertical-align: top;
                    margin: 20px 10px 10px 5px;
                }

                #customers-list .k-item > span:first-child {
                    -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    margin: 10px;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-size: 100%;
                    background-repeat: no-repeat;
                }

                #customers-list h3 {
                    font-size: 1.2em;
                    font-weight: normal;
                    margin: 0 0 1px 0;
                    padding: 0;
                }

                #customers-list p {
                    margin: 0;
                    padding: 0;
                    font-size: .8em;
                }
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2020.1.114/styles/kendo.blueopal.min.css" />

    <script src="http://kendo.cdn.telerik.com/2020.1.114/js/jquery.min.js"></script>
    
        <script src="http://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
</head>
<body>
        <div id="example">

            <div class="demo-section k-content">
                <h4>Customers</h4>
                <input id="customers" style="width: 100%"/>
            </div>
        </div>
</body>
</html>

2
  • Legal, mas não me parece ser muito responsivo né?
    – Dorathoto
    3/02/2020 às 12:34
  • Pode-se controlar o tamanho da fonte pelo css, é uma alternativa. 4/02/2020 às 11:29
-2

Minha pequena contribuição de como mostrar imagem no select option usando jquery,posso selecionar ela posteriormente ou quando o arquivo é carregado:

$(".my_select").change(function() {
   var value_my_select = $(this).val();
   $(".my_select").css({"background":"url(https://via.placeholder.com/468x60?text=My+image+" +value_my_select + ") no-repeat","background-size": "100% 100%"})
}).trigger( "change" ); 

//$(".my_select").val("3333").trigger( "change" );
select {
  width: 100%;
  height: 100px;
  color: transparent;
}

.my_select * {
  color: #000;
  height: 30px;
}

select,option {
  padding: 0 6px;
  margin: 0 0;
  padding: 0 10px;
  text-align: center;
  font-size: 18px;
}

select, option:checked {  font-weight: bold; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="my_select">
      <option>1111</option>
      <option selected>2222</option>
      <option>3333</option>
      </select>

aqui é melhor para se testar as possibilidade: https://jsfiddle.net/diversalizando/40rec3w1/19/

1
  • Funciona muito bem para mobile.. 26/04/2021 às 18:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .