0
503
ViewsLa opción desplegable seleccionada cambia de color y un espacio entre el contenedor y el cuadro de búsqueda
Pude cambiar el color de fondo de la opción seleccionada, pero cambia su color después de haber pasado el mouse sobre cualquier otra opción.
¿Hay alguna manera de controlar esto y cómo puedo deshacerme de este molesto espacio entre el cuadro de búsqueda de resultados y el contenedor aunque no aparezca en el fragmento de código?
El código
#bap + .select2 .select2-selection__rendered { background-color: yellow; } /* Each result */ #select2-bap-results { background-color: salmon; } /* Higlighted (hover) result */ #select2-bap-results .select2-results__option--highlighted { background-color: rgb(5, 27, 27) !important; } /* Selected option */ #select2-bap-results .select2-results__option[aria-selected="true"] { background-color: rgb(13, 14, 14) !important; } /* Around the search field */ .select2-search { background-color: orange; } /* Search field */ .select2-search input { background-color: pink; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <!-- --> </head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="/search" method="get" class="d-flex w-25"> <select id="bap" class="select2" style="width: 100%;" name="state"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> <option value="WY">Wyoming</option> <option value="WY">Wyoming</option> </select> </form> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script>$(document).ready(function () { $('.select2').select2(); }); </script> Solución para el molesto "espacio en blanco"
Se agregó más altura de línea al elemento.
#bap + .select2 .select2-selection__rendered {}
·
Juan Pablo Isaza
1 answers
Answer question0
Puede agregar este CSS para cambiar el color de fondo de la opción seleccionada que aparece con el fondo gris: (simplemente usé verde para el ejemplo)
#select2-bap-results .select2-results__option--selected { background-color: green; }Ese cambio se aplicó al siguiente ejemplo ejecutable:
#bap + .select2 .select2-selection__rendered { background-color: yellow; } /* Each result */ #select2-bap-results { background-color: salmon; } /* Higlighted (hover) result */ #select2-bap-results .select2-results__option--highlighted { background-color: rgb(5, 27, 27) !important; } /* Selected option */ #select2-bap-results .select2-results__option[aria-selected="true"] { background-color: rgb(13, 14, 14) !important; } /* Around the search field */ .select2-search { background-color: orange; } /* Search field */ .select2-search input { background-color: pink; } #select2-bap-results .select2-results__option--selected { background-color: green; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <!-- --> </head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="/search" method="get" class="d-flex w-25"> <select id="bap" class="select2" style="width: 100%;" name="state"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> <option value="WY">Wyoming</option> <option value="WY">Wyoming</option> </select> </form> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script>$(document).ready(function () { $('.select2').select2(); }); </script>
·
Juan Pablo Isaza
Report
Answer question