8000 GitHub - thomascullen/Checkdown.js: style checkboxes and select inputs with CSS
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
This repository was archived by the owner on Feb 11, 2019. It is now read-only.

thomascullen/Checkdown.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

#checkdown.js

Custom checkboxes and select inputs

checkdown.js does not require any other libraries. Simply include 'checkdown.js' in your head tag and all of the checkbox & select inputs will be converted to simple html structures which you can then style using CSS. The input elements will be hidden and their values will be controlled with the new html structures.

###Checkbox When checked the 'checkdown-checkbox' div has a class of 'true'. Use this class to style the different states of the checkbox As shown with the 'checkbox' class, any classes on the checkbox input will also be added to the generated checkbox html

<input type="checkbox" name="complete" class="checkbox">

is converted to

<div class="checkdown-checkbox checkbox" data-name="complete">
	<div></div>
</div>

###Dropdown When open the 'checkdown-dropdown' div has a class of 'open'. Use this class to style the different states of the dropdown. The default text on the dropdown comes from the placeholder data attribute which you add to the select input. As shown with the 'dropdown' class, any classes on the select input will also be added to the generated dropdown html.

<select name="colour" class="dropdown" data-placeholder="Choose a colour...">
	<option value="blue">Blue</option>
	<option value="red">Red</option>
	<option value="purple">Purple</option>
	<option value="orange">Orange</option>
</select>

is converted to

<div class='checkdown-dropdown dropdown' data-name="colour">
	<div class='dropdown-toggle'>
		<span>Choose a colour...</span>
		<i></i>
	</div>
	<ul>
		<li data-value="blue">Blue</li>
		<li data-value="red">Red</li>
		<li data-value="purple">Purple</li>
		<li data-value="orange">Orange</li>
	</ul>
</div>

###License MIT

About

style checkboxes and select inputs with CSS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
0