CSS/CSS3 sólo casillas de verificación personalizadas, radios y conmutadores-el-CheckBox

Vista prévia

Descripción

el-CheckBox es una biblioteca pura CSS/CSS3 para crear casillas de verificación personalizadas, botones de radio, y el estilo iOS interruptores de palanca .

Características

• 4 temas: predeterminado, rojo, verde y amarillo.
• 3 tamaños: predeterminado, pequeño y grande.

Funcionamiento

el-CheckBox es una biblioteca pura CSS/CSS3 para crear casillas de verificación personalizadas, botones de radio, y el estilo iOS interruptores de palanca .

<link rel="stylesheet" href="./dist/checkbox.css">

el-CheckBox es una biblioteca pura CSS/CSS3 para crear casillas de verificación personalizadas, botones de radio, y el estilo iOS interruptores de palanca .

<div class="el-checkbox">

<span class="margin-r">Unchecked</span>

<input type="checkbox" name="check" id="1_1">

<label class="el-checkbox-style" for="1_1"></label>
</div>

<div class="el-checkbox">

<span class="margin-r">Checked</span>

<input type="checkbox" name="check" id="1_2" checked>

<label class="el-checkbox-style" for="1_2"></label>
</div>

<div class="el-radio">

<span class="margin-r">Unchecked</span>

<input type="radio" name="radio1" id="2_1" value="option" checked>

<label class="el-radio-style" for="2_1"></label>
</div>

<div class="el-radio">

<span class="margin-r">Checked</span>

<input type="radio" name="radio1" id="2_2" value="option" checked>

<label class="el-radio-style" for="2_2"></label>
</div>

el-CheckBox es una biblioteca pura CSS/CSS3 para crear casillas de verificación personalizadas, botones de radio, y el estilo iOS interruptores de palanca .

<label class="el-switch">

<input type="checkbox" name="switch">

<span class="el-switch-style"></span>
</label>

Establezca el tamaño.

<label class="el-checkbox el-checkbox-sm">

<span class="margin-r">small checkbox</span>

<input type="checkbox" name="check" checked>

<span class="el-checkbox-style
pull-right"></span>
</label>

<label class="el-checkbox el-checkbox-lg">

<span class="margin-r">large checkbox</span>

<input type="checkbox" name="check" checked>

<span class="el-checkbox-style
pull-right"></span>
</label>

Cambie los temas predeterminados.

<div class="el-checkbox el-checkbox-green">

<span class="margin-r">Unchecked</span>

<input type="checkbox" name="check" id="2_1">

<label class="el-checkbox-style" for="2_1"></label>
</div>

<div class="el-checkbox el-checkbox-red">

<span class="margin-r">Unchecked</span>

<input type="checkbox" name="check" id="3_1">

<label class="el-checkbox-style" for="3_1"></label>
</div>

<div class="el-checkbox el-checkbox-yellow">

<span class="margin-r">Unchecked</span>

<input type="checkbox" name="check" id="4_1">

<label class="el-checkbox-style" for="4_1"></label>
</div>