Casillas de selección personalizadas multiplataforma con CSS puro-Select. CSS

Vista prévia

Descripción

Select. CSS es una biblioteca de CSS ligera que se utiliza para el estilo consistente de la nativa seleccionar elemento de forma consistente en los dispositivos más populares como iOS, Android, Kindle, Windows Phone, navegadores de escritorio y mucho más.

Funcionamiento

Cargue el SELECT. CSS requerido en la sección head del documento.

<link rel="stylesheet" href="src/select.css">

Envuelve tus elementos Select regulares en un contenedor con la clase CSS de ' Custom-Select '.

<div class="button custom-select">

<select>


<option>Apples</option>


<option>Bananas</option>


<option>Grapes</option>


<option>Oranges</option>

</select>
</div>

Agregue estilos personalizados a la selección. Reemplace los estilos como quiera.

.button {

border: 1px solid #bbb;

border-radius: .3em;

box-shadow: 0 1px 0 1px rgba(0,0,0,.04);

background: #f3f3f3; /* Old browsers */

background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* IE10+ */

background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); /* W3C */
}

Registro de cambios

v2.0.3 (06/29/2017)

• Bugfix