Estoy tratando de dar mi <select> menú personalizado de color y relleno. A partir de ahora, Se parece a esto:

Bootstrap seleccione menú estilo

CSS:

select {
  display: block;
  margin: 0 auto;
  background-color: #2A3F54;
}

HTML:

<select name="ad_account_selected" onchange="this.form.submit()" class="selectpicker" data-style="btn-primary">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Quiero un pequeño hueco entre los menús y en el lado izquierdo y darle el color de mi barra lateral ( visto en todo el menú de arriba ). Sin embargo, el botón queda en el color por defecto e incluso si puedo añadir padding-left: 20px el menú está pegado a la izquierda. Alguna ayuda?

InformationsquelleAutor newkid101 | 2016-05-12

1 Comentario

  1. 5

    Cambiar su data-style a btn-new como este:

    <select data-style="btn-new">
        ....
    </select>

    Y luego el estilo de ese botón como este:

    .btn-new {
        background-color: #2A3F54;
    }

    Link para CodePen: http://codepen.io/anon/pen/pyBjrr

    • Me hizo probar esto ( con el !importante y .selectpicker). Pero no tiene efecto sobre el color en absoluto. Es por eso que he publicado aquí. No importa lo que haga, el estilo predeterminado prevalece
    • Por favor, proporcione un enlace a la página o volver a crear lo que han hecho hasta ahora en jsFiddle.
    • codepen
    • El azul claro es el de btn-primary de este botón prestados por bootstrap-seleccione: <button type="button" class="btn dropdown-toggle btn-primary">
    • Usted tendrá que sobrescribir en su lugar.
    • Esa es la pregunta. Me parece que no puede reemplazar eso. Si no me especificar cualquier data-style el valor predeterminado es btn-default y aparece de color blanco y no el color que quiero
    • Por favor, compruebe respuesta actualizada.
    • Impresionante. Gracias. Yo estaba semi esperando el desplegable tendrán el mismo color demasiado en lugar de la blanca y aburrida
    • Sobrescribir que con !importante
    • He cambiado el color en hover seleccionándola con btn-new:hover, ¿el menú desplegable tener algo como btn:dropdown ?

Dejar respuesta

Please enter your comment!
Please enter your name here