Home / Python / Forms

CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element.

magic-input CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element. Live demo Usage $ npm install magic-input Include dist/magic-input.css or dist/magic-input.min.css in your html. I
Information
Category: Python / Forms
Watchers: 9
Star: 84
Fork: 45
Last update: May 29, 2023
Resource links
https://jaywcjlove.github.io/magic-input
https://github.com/jaywcjlove/magic-input

magic-input

CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element. Live demo

Usage

$ npm install magic-input

Include dist/magic-input.css or dist/magic-input.min.css in your html. If your use Stylus use magic-input.styl

import 'magic-input/dist/magic-input.min.css';
// or
import 'magic-input/lib/magic-input.styl';

Or manually download and link magic-input in your HTML, It can also be downloaded via UNPKG:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/magic-input/dist/magic-input.min.css">

Checkbox iPhone Style

<input type="checkbox" class="mgc-switch mgc-sm" checked />
<input type="checkbox" class="mgc-switch"  />
<input type="checkbox" class="mgc-switch mgc-lg" checked />

Checkbox

<input type="checkbox" class="mgc" checked/> Default
<input type="checkbox" class="mgc mgc-primary" checked /> Primary
<input type="checkbox" class="mgc mgc-success" /> Success
<input type="checkbox" class="mgc mgc-info" checked /> Info
<input type="checkbox" class="mgc mgc-warning" checked /> Warning
<input type="checkbox" class="mgc mgc-danger" checked /> Danger

Radios

<input type="radio" name="radio3" class="mgr mgr-sm"/> Default
<input type="radio" name="radio3" class="mgr mgr-primary" /> Primary
<input type="radio" name="radio3" class="mgr mgr-success mgr-lg" checked/> Success
<input type="radio" name="radio3" class="mgr mgr-info mgr-sm" /> Info
<input type="radio" name="radio3" class="mgr mgr-warning" /> Warning
<input type="radio" name="radio3" class="mgr mgr-danger mgr-lg" /> Danger

Sizing Class

sm for small , lg for large

For Checkbox

mgc-sm mgc-lg

For Radio Button

mgr-sm mgr-lg

Colorize Class

For Checkbox

mgc-primary mgc-info mgc-success mgc-warning mgc-danger

For Radio Button

mgr-primary mgr-info mgr-success mgr-warning mgr-danger

1 Open More issues
Closed

remove `outline` when using bootstrap

hi man, when I use magic input with bootstrap, checkbox and radio button will cover a outline shadow when the element active. Bootstrap default define a outline style for form control active status,

image

Easy way to resolve it is remove the outline style from bootstrap

outline: none;

Thanks

opened May 3, 2016 by jerrybendy 7
Closed

Update index.html

opened Sep 30, 2020 by BhuvnendraPratapSingh 1
Closed

fix(deps): update dependency stylus to ^0.59.0 - autoclosed

Mend Renovate

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | stylus | ^0.54.3 -> ^0.59.0 | age | adoption | passing | confidence |

Release Notes

stylus/stylus

v0.59.0

Compare Source

===================

v0.58.1

Compare Source

===================

  • fix: bin/stylus in npm packages contains windows style line endings #​2691
  • ci: add yarn bin/stylus execute regression test #​2692

v0.58.0

Compare Source

===================

  • feat: support full css level 4 logical combination selectors (:is, :where, :not, :has). #​2684
  • deps: drop safer-buffer. #​2682
  • chore: ci add code coverage benchmark. #​2683
  • chore: delete unused .gitmodules file. #​2687
  • chore: remove unused require. #​2686

v0.57.0

Compare Source

===================

  • Fix: remove lib-cov and outdated deps. #​2659

v0.56.0

Compare Source

===================

  • Deps: upgrade debug version from v3 to v4. #​2643
  • Deps: remove dependencies semver and mkdirp. 2641
  • Fix: variable names beginning with a keyword and dash. #​2634
  • Fix: @​import url() error in dependency resolver. #​2632

v0.55.0

Compare Source

===================

  • Fearure: Add deg and fr as exceptions for 0 value unit omission. #​2578
  • Feature: Add inverse trigonometric functions as bifs. #​2186 closes #​1567
  • Fix: Bug fixes of encoding png image in url lib function. #​2549
  • Refactoring: Replace dependency css-parse with css. #​2554

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

opened Mar 1, 2023 by renovate[bot] 0
Closed

fix(deps): update dependency autoprefixer-stylus to ^0.14.0 - autoclosed

Mend Renovate

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | autoprefixer-stylus | ^0.9.2 -> ^0.14.0 | age | adoption | passing | confidence |

Release Notes

jescalan/autoprefixer-stylus

v0.14.0

Compare Source

v0.13.0

Compare Source

  • Routine dependency update release

v0.11.0

Compare Source

v0.10.0

Compare Source

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

opened Mar 1, 2023 by renovate[bot] 0
Closed

Configure Renovate

Mend Renovate

Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.

Detected Package Files

  • package.json (npm)

Configuration

🔡 Renovate has detected a custom config for this PR. Feel free to ask for help if you have any doubts and would like it reviewed.

Important: Now that this branch is edited, Renovate can't rebase it from the base branch any more. If you make changes to the base branch that could impact this onboarding PR, please merge them manually.

What to Expect

With your current configuration, Renovate will create 3 Pull Requests:

Update dependency autoprefixer-stylus to ^0.14.0
  • Schedule: ["at any time"]
  • Branch name: renovate/autoprefixer-stylus-0.x
  • Merge into: master
  • Upgrade autoprefixer-stylus to ^0.14.0
Update dependency stylus to ^0.59.0
  • Schedule: ["at any time"]
  • Branch name: renovate/stylus-0.x
  • Merge into: master
  • Upgrade stylus to ^0.59.0
Update dependency autoprefixer-stylus to v1
  • Schedule: ["at any time"]
  • Branch name: renovate/autoprefixer-stylus-1.x
  • Merge into: master
  • Upgrade autoprefixer-stylus to ^1.0.0

🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or overwhelm the project. See docs for prhourlylimit for details.

❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.

This PR has been generated by Mend Renovate. View repository job log here.

opened Mar 24, 2020 by renovate[bot] 0
Closed

Remove outline on focused state of input

To work properly outline: 0 rule should be applied to focused state of input, read more: http://stackoverflow.com/a/21758143/1331425

opened Jul 24, 2016 by limonte 0
Open

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

github-actions
.github/workflows/ci.yml
  • actions/checkout v3
  • actions/setup-node v3
  • peaceiris/actions-gh-pages v3
  • ncipollo/release-action v1
npm
package.json
  • autoprefixer-stylus ~1.0.0
  • stylus ~0.59.0
  • [ ] Check this box to trigger a request for Renovate to run again on this repository
opened Mar 1, 2023 by renovate[bot] 0

v2.0.0(Mar 1, 2023)

https://github.com/jaywcjlove/magic-input/compare/v1.0.2...v2.0.0

v1.0.2(Mar 1, 2023)

https://github.com/jaywcjlove/magic-input/compare/v1.0.1...v1.0.2

  • 📄 Remove outline on focused state of input 4195ac7 @limonte
  • 📄 Merge pull request #2 from limonte/patch-1 01031f2 @jaywcjlove
  • 📄 fixed style cannot be displayed. 62b6187 @jaywcjlove
  • 📄 Add npmignore 5a64a89 @jaywcjlove
  • 📄 Update README.md d778b96 @jaywcjlove
  • 📄 Create FUNDING.yml 3caaa5f @jaywcjlove
  • 📄 Update index.html 76df306 @BhuvnendraPratapSingh
  • 💄 chore: Add renovate.json (#3) f7ef34c @renovate-bot
  • 💄 chore(deps): update devDependencies. 06fdfbb @jaywcjlove
  • 💄 chore: add workflows config. 37d1273 @jaywcjlove
  • 📖 doc: Update README.md 7e06f63 @jaywcjlove
  • 💄 chore: add files field in package.json. 98f1987 @jaywcjlove
  • 💄 chore: update workflows config. cb96dca @jaywcjlove
  • 💄 chore: update workflows config. 3bf41f3 @jaywcjlove
  • 💄 chore: update workflows config. 8129b29 @jaywcjlove

v1.0.1(Mar 1, 2023)

Contents

    mariomka vue-checkbox-radio - A Vue component to easily styling checkbox and radio inputs.
    hamed-ehtesham pretty-checkbox-vue pretty checkbox 3pretty-checkbox-vue - Implementation of pretty checkbox 3(A pure CSS library to beautify checkbox and radio buttons) components for Vue.js 2.2+.
    720kb :ballot_box_with_check: Tiny set of pure CSS animations for your checkbox input. https://720kb.github.io/checkbox.css/
    720kb :radio_button: Tiny set of pure CSS animations for your radio inputs. https://720kb.github.io/radiobox.css/
    lokesh-coder A pure CSS library to beautify checkbox and radio buttons.
    joelthorner Simple button checks is a simple plugin for transform checkbox inputs into html buttons for css customize.
    flatlogic ✔️Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier
    mrastiak vue-loading-checkbox - A highly customizable Vue.js checkbox UI component with loading state
    chenglou Better radio buttons.
    github Boilerplate for creating a custom element.
    uin3566 An expandable button menu that you can define expand angle and button count and so on
    brannondorsey 📡 An AX.25 packet radio chat protocol with support for digital signatures and binary compression. Like IRC over radio waves.
    kentcdodds DEPRECATED IN FAVOR OF prettier-atom + ESLint integration
    analogcode Professional Radio Station App - now supports Swift 5 / Xcode 10!
    danreeves ✍️ A Sublime Text 3 plugin for Prettier
    prettier ESLint plugin for Prettier formatting
    staticdeng A cross-platform radio and multiple-choice React Native component that checkbox style users can define
    ElemeFE 🚀 Element-Helper is a Atom package for Element-UI.
    Livin21 An android library to display FontAwesome Icons in any View or a MenuItem
    SpruceGabriela 30 dias de CSS3 é um desafio que visa ajudá-lo a melhorar suas habilidades de codificação fazendo mini projetos diarios utilizando HTML5 e CSS3
    DSchau Parse code blocks in markdown files and run prettier on them
    Share this repo

    Related Repos


    Forms
    397
    A Python HTML form library.
    Pylons Deform Introduction Use cases Installation Example Status Projects using Deform Community and links Introduction Deform is a Python form library for generating HTML forms on the s
     
    Forms
    2.3k
    Bootstrap 3 integration with Django.
    zostera Bootstrap 3 for Django Bootstrap 3 integration for Django. Goal The goal of this project is to seamlessly blend Django and Bootstrap 3. Want to use Bootstrap 4 in Django? See https://github.com/zoste
     
    Forms
    49
    A language for filtering, matching, and validating Python dictionaries
    ambitioninc kmatch A language for matching/validating/filtering Python dictionaries Installation To install the latest release, type: pip install kmatch To install the latest code directly from source, type: pip i
     
    Forms
    2.7k
    Schema validation just got Pythonic
    keleshev Schema validation just got Pythonic schema is a library for validating Python data structures, such as those obtained from config-files, forms, external services or command-line parsing, converted from JSON/YAML (or something els
     
    Forms
    1.3k
    Django Simple Captcha is an extremely simple, yet highly customizable Django application t...
    mbi Django Simple Captcha Django Simple Captcha is an extremely simple, yet highly customizable Django application to add captcha images to any Django form. Features Very simple to setup and deploy, yet very conf
     
    Forms
    23
    Simple spam blocker for Django
    moqada Django Simple Spam Blocker Django Simple Spam Blocker is blocking spam by regular expression. Filtering the following matters. Author Content Email IP Referer URL UserAgent And you can edit regular expressio
     
    Forms
    84
    CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element.
    jaywcjlove magic-input CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element. Live demo Usage $ npm install magic-input Include dist/magic-input.css or dist/magic-input.min.css in your html. I