Alterar css de um objeto do tipo zoom

[redschenko]

Tenho um campo zoom que preciso alterar o css dele (alterar o fundo).

Fiz testes adicionado minha classe css e também utilizando o style=“background-color: yellow;”, porém não funcionou.

    <label class="control-label" id="lbSolicitante" for="solicitante">SOLICITANTE:<span class='text-danger'>*</span></label>
    <input style="background-color: yellow;" class="form-control input-sm obg-sol testeFundo" type="zoom" name="solicitante" id="solicitante" data-zoom="{
    'displayKey':'NOME',
    'datasetId':'ds_Colaboradores',
    'filterValues':'TABELA,SRA,ZOOM,INATIVO,ORDEM,NOME',
    'maximumSelectionLength':'1',
    'placeholder':'Solicitante?',
    'fields':[
        {
            'field':'NOME',
            'label':'Nome',
            'standard':'true'
        },
        {
            'field':'CC',
            'label':'CC'
        }
    ]
}" />

Vi que ele utiliza o Select2 para criar o campo zoom e tentei também usando o código:

$('.select2-selection__rendered').css({'background-color':'yellow'});

Ele alterou, porém como tenho 3 campos do tipo zoom, alterou de todos.
Alguém tem alguma sugestão?

At
Rodrigo de Oliveira

[sergio.machado]

Se deseja que seu campo zoom tenha uma determinada cor de fundo, e ao selecionar um valor ele volte para a cor de fundo normal.

Em seu arquivo css cole o seguinte código abaixo

#solicitante:empty ~ span .select2-selection–multiple{
background-color: yellow!important
}

Se atentando apenas para o ID do seu campo zoom

[redschenko]

Obrigado pela resposta @sergio.machado.
Fiz o teste e não funcionou.
Adicionei dentro do meu html direto na tag style, incluindo outro campo, mas do tipo text.
Ficou assim

    <style>
     #solicitante:empty~span .select2-selection–multiple {
        background-color: yellow !important
     }

     #valor {
        background-color: yellow !important
     }
    </style>

Para o campo do tipo zoom não funciona.

Alguma outra sugestão?

At
Rodrigo de Oliveira

[Bruno_Gasparetto]

Uitilizei assim e funcionou. Mas com ~span também funciona.

#ccProjeto:empty +span .select2-selection.select2-selection--multiple {
    background-color: #F00;
}

Porém o :empty só funcionará até algo ser selecionado, pois se você selecionar algum item e depois desmarcar o item o select continuará contendo o option criado, então a regra não vai valer.

Um jeito é adicionar o background com JS nas funções disparadas quando há mudança no Zoom.

[redschenko]

Show de bola @Bruno_Gasparetto
Funcionou!

Fiz assim:

    #solicitante +span .select2-selection.select2-selection--multiple {
      background-color: #fcffab;
    }

    #solicitante +span .select2-selection__choice {
      background-color: #fcffab;
    }

Muito obrigado!