https://github.com/scazzy/css-form-ui

Styling Dropdown (Select), Checkbox and Radio in CSS!
https://github.com/scazzy/css-form-ui

Last synced: about 1 month ago
JSON representation

Styling Dropdown (Select), Checkbox and Radio in CSS!

• Host: GitHub
• URL: https://github.com/scazzy/css-form-ui
• Owner: scazzy
• License: apache-2.0
• Created: 2015-04-19T13:54:38.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-04-20T05:09:13.000Z (over 9 years ago)
• Last Synced: 2023-03-24T07:43:07.079Z (over 1 year ago)
• Language: CSS
• Size: 176 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# STYLING HTML FORM UI WITH CSS

Styling CSS Forms - Dropdown (Select), Checkbox and Radio in CSS!

Available as [CSS](//github.com/scazzy/CSS-FORM-UI/blob/master/css/formui.css), and [LESS](//github.com/scazzy/CSS-FORM-UI/blob/master/css/less/formui.less) files.

**Demo** : [Click here](https://rawgit.com/scazzy/CSS-FORM-UI/master/index.html)

![Alt text](https://i.imgur.com/5GwlKQa.png "Style Form select dropdown radio checkbox in css")

##Dropdown

No damn javascript required!

```



    

        Select 

        Option 

        Option 2

    



```




##Radio

```

    

    Option a

    

    Option b

```

A line of jQuery to add 'checked' class

```

$('body').on('change', '.formui-radio input[type="radio"]', function () {

    var $opt = $(this);

    $opt.parent('.option').addClass('checked').siblings('.option').removeClass('checked');

});

```




##Checkbox

```

    

    Option a

    

    Option b

    

    Option c

```

A line of jQuery to toggle 'checked' class

```

$('body').on('change', '.formui-checkbox input[type="checkbox"]', function () {

    var $opt = $(this);

    $opt.parent('.option').toggleClass('checked');

});

```





> ###How it works?

> It's extremely simple.

> We create a single wrapper around our non-stylable form elements (Dropdown, Checkbox & Radio).

> **The magic!** : We hide the real DOM element in such a way that it exists but remains invisible. This allows any clicks or action on that element (in all 3 cases) to function naturally. 

> **For Checkbox/Radio**: Only javascript required is to add a "checked" class to the wrapper". 

>> Whole CSS is completely customizable, and you can use it as part of your code instead of a library. It just shows a way how to style your Form Elements. Feel free to change class name, and everything else. 

> This minimal and still natural method allows all UI elements to work naturally, for getting or changing data. No specific library calls for those. (Textboxes, textareas, buttons - are always stylable, hence not added in this lib)

>> Want more? - If you want it as a library with more functionalities, feel free to create an issue on the github.

### Author

[@eltonjain](http://twitter.com/eltonjain)