Material Design CheckBox & botones de opción en Pure CSS-icheck-material

Vista prévia

Descripción

icheck-material es una biblioteca CSS/CSS3 que le permite embellecer & animar las casillas de verificación y botones de radio regulares con estilos de diseño de materiales.

See also:

• bootstrap CheckBox & botón de radio en CSS puro

Funcionamiento

Instale el paquete icheck-material.

# NPM
$ npm install icheck-material --save

Importe el icheck-material.

import './icheck-material.min.css';

<link href="icheck-material.css" rel="stylesheet" type="text/css">

Crear casillas de verificación de diseño de materiales & botones de radio:

<div class="icheck-material-red">

<input type="checkbox" checked id="red" />

<label for="red">red</label>
</div>
<div class="icheck-material-red">

<input type="radio" id="red1" name="red" />

<label for="red1">red 1</label>
</div>
<div class="icheck-material-red">

<input type="radio" checked id="red2" name="red" />

<label for="red2">red 2</label>
</div>

Para hacer las casillas de verificación & botones de radio en línea, simplemente agregue la clase ' icheck-inline ' al contenedor principal.

<div class="icheck-material-red icheck-inline">

<input type="checkbox" checked id="red" />

<label for="red">red</label>
</div>
<div class="icheck-material-red icheck-inline">

<input type="radio" id="red1" name="red" />

<label for="red1">red 1</label>
</div>
<div class="icheck-material-red icheck-inline">

<input type="radio" checked id="red2" name="red" />

<label for="red2">red 2</label>
</div>