CSS para campo select2

Formulários
#1

Galera,

Onde devo conseguir customizar o css dos campos select2 no SC9??
As configurações do “Display Settings” do campo praticamente não tem efeito no select2 em si…
[]s

Marcio

#2

Tem que atribuir o CSS manualmente

#3

Valeu, Haroldo…

#4

preciso mudar o CSS do select2 no tema, alguém pode ajudar?

#5

ola! sou novato… pode me indicar como fazer isso??

No manual do sc so tem a personalização do tema pelo menu no sc.

Ja conseguí personalizar o tema inteiro, mas como deixei no “modo escuro” o campo select2 fica com aquele fundo branco que não consigo tirar.

Na imagem da p ver que o camo da esquerda ta otimo, linha de formulario.
Mas o da direita (select2) fica assim, o selec normal ja fica tudo certo tambem, so o select2 que fica com o fundo branco.

A ideia e modificar todos os campos select2 do projeto.
Segundo ChatGPT, teria que encontrar o “scriptcase/config.php” e adicionar define('SC_SELECT2_CLASS', 'mi-select2-custom');

Mas já me perdí. :sweat_smile:

Agradeço desde já!

image

#6

chatGPT & Scriptcase?

:thinking:

onscriptInit:

echo <<<HTML
<style>
.select2-container .select2-selection--single .select2-selection__rendered{ 
    background-color: gray !IMPORTANT; 
    color: white !IMPORTANT;
 } 

.scFormPage .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #c1c3c5 !IMPORTANT;
    color: white  !IMPORTANT;
}
</style>
HTML;

Sugestão: Se for consultar ChatGPT, Scriptcase não é uma linguagem, então consulte, sobre PHP,HTML,CSS, JAVASCRIPT.

Pergunte ao ChatGPT:
Como atribuir css style para elementos do tipo select2?

3 Curtidas
#7

Obrigado pela resposta…

Pior que tem me ajudado com o scriptcase… as vezes inventa coisa, mas geralmente acerta…
Obrigado pela sugestão, vou focar nisso tambem.

Teria como fazer para todos os form no projeto?
Ou tenho que entrar em cada form e adicionar essa style no osscriptInit?

achei o arquivo css do tema na pasta _lib e esta com as cores que correspondem ao tema, mas não assume no projeto. :man_shrugging:

#8

Em cada aplicação.

Crie uma biblioteca externa.

2 Curtidas
#9

Muito obrigado!
Deu certo… so não consegui trocar as cores do hover e do que esta selecionado.

Ficou assim:
image

Para um novato como eu que futuramente deseja ter uma noção de como fica completo, deixo aqui o que esta no evento onScriptInit:

echo <<<HTML
    <style>
    #main_table_form .select2 .select2-selection {
    	background: #0a1727 !important;
    	border-color: #334050 !important;
    }

    #main_table_form .select2-container .select2-selection--single {
    	height: 35px !important;
    }

    #main_table_form .select2-container--default .select2-selection--single .select2-selection__rendered {
    	line-height: 35px !important;
    }

    #main_table_form .select2-container .select2-selection__rendered {
    	background: transparent !important;
    	color: #f9fafd !important;
    }

    #main_table_form .select2-container--default .select2-selection--single .select2-selection__arrow {
    	top: 5px !important;
    }

    .select2-results {
    	background: #0a1727 !important;
    }

    .scFormPage .select2-container .select2-dropdown {
    	border-color: #334050 !important;
    }

    .select2-dropdown {
    	border-radius: 0 0 10px 10px !important;
    	overflow: hidden !important;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field {
    	background: #0a1727 !important;
    	border-color: #334050 !important;
    	border-radius: 10px !important;
    }

    .select2-search--dropdown {
    	background: #0a1727 !important;
    }
    </style>
    HTML;