Mot-clé - CSS

Fil des billets

lundi 27 juin 2016

CSS pour Select2 et Bootswatch 3.3.6 Flatly

Si vous utilisez Select2 et une CSS Bootswatch Flatly, vous déplorez peut-être la non homogénéité des apparences. Le petit fragment de CSS ci-dessous permet d'optimiser l'affichage des champs Select2 :

/* Optimize Select2 css to work with the Bootswatch Flatly theme */
.select2-selection {
    border-width: 2px !important;
    box-shadow: none !important;
    color: #2c3e50 !important;
    border-color: #0054a0 !important;
    border: 2px solid #dce4ec !important;
    border-radius: 4px !important;
    height: 45px !important;
    padding: 10px 15px !important;
    font-size: 15px !important;
    line-height: 1.42857143 !important;
    font-family: inherit !important;
}

.select2-container--default .select2-selection:focus{
    border-bottom-width: 2px !important;
    outline: none !important;
}

.select2-dropdown {
  border: 2px solid #dce4ec !important;
}

.select2-selection__rendered{
    color: #2c3e50 !important;
    padding-left: 0px !important;
}