September 18, 2013 05:36 · Sep 18, 2013
diff --git a/Custom-Select-Menu.markdown b/Custom-Select-Menu.markdown
@@ -0,0 +1,7 @@
+Custom Select Menu
+------------------
+A custom select menu without plugins.
+
+A [Pen](http://codepen.io/wallaceerick/pen/ctsCz) by [Wallace Erick](http://codepen.io/wallaceerick) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/wallaceerick/pen/ctsCz/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<h1>Custom Select <span>Without Plugin</span></h1>
+
+<select id="mounth">
+    <option value="hide">-- Month --</option>
+    <option value="january" rel="icon-temperature">January</option>
+    <option value="february">February</option>
+    <option value="march">March</option>
+    <option value="april">April</option>
+    <option value="may">May</option>
+    <option value="june">June</option>
+    <option value="july">July</option>
+    <option value="august">August</option>
+    <option value="september">September</option>
+    <option value="october">October</option>
+    <option value="november">November</option>
+    <option value="december">December</option>
+</select> 
+
+<select id="year">
+    <option value="hide">-- Year --</option>
+    <option value="2010">2010</option>
+    <option value="2011">2011</option>
+    <option value="2012">2012</option>
+    <option value="2013">2013</option>
+    <option value="2014">2014</option>
+    <option value="2015">2015</option>
+</select>
diff --git a/script.js b/script.js
@@ -0,0 +1,45 @@
+$('select').each(function(){
+    var $this = $(this), numberOfOptions = $(this).children('option').length;
+
+    $this.addClass('styled-hidden');
+    $this.wrap('<div class="select"></div>');
+    $this.after('<div class="select-styled"></div>');
+
+    var $styledSelect = $this.next('div.select-styled');
+    $styledSelect.text($this.children('option').eq(0).text());
+
+    var $list = $('<ul />', {
+        'class': 'select-options'
+    }).insertAfter($styledSelect);
+
+    for (var i = 0; i < numberOfOptions; i++) {
+        $('<li />', {
+            text: $this.children('option').eq(i).text(),
+            rel: $this.children('option').eq(i).val()
+        }).appendTo($list);
+    }
+
+    var $listItems = $list.children('li');
+
+    $styledSelect.click(function(e) {
+        e.stopPropagation();
+        $('div.select-styled.active').each(function() {
+            $(this).removeClass('active').next('ul.select-options').hide();
+        });
+        $(this).toggleClass('active').next('ul.select-options').toggle();
+    });
+
+    $listItems.click(function(e) {
+        e.stopPropagation();
+        $styledSelect.text($(this).text()).removeClass('active');
+        $this.val($(this).attr('rel'));
+        $list.hide();
+        //alert($this.val());
+    });
+
+    $(document).click(function() {
+        $styledSelect.removeClass('active');
+        $list.hide();
+    });
+
+});
diff --git a/style.scss b/style.scss
@@ -0,0 +1,105 @@
+@import "compass";
+@import "compass";
+@import "http://wallaceerick.com.br/clientes/flat-ui/assets/css/modules/_icons.scss";
+@import url("http://fonts.googleapis.com/css?family=Lato");
+
+$background: #e74c3c;
+$select-color: #fff;
+$select-background: #c0392b;
+$select-width: 250px;
+$select-height: 40px; 
+
+@font-face {
+  font-family: 'Fontello';
+  src: url('http://www.wallaceerick.com.br/clientes/flat-ui/assets/fonts/fontello.eot');
+  src: url('http://www.wallaceerick.com.br/clientes/flat-ui/assets/fonts/fontello.eot#iefix') format("embedded-opentype"), url('http://www.wallaceerick.com.br/clientes/flat-ui/assets/fonts/fontello.woff') format("woff"), url('http://www.wallaceerick.com.br/clientes/flat-ui/assets/fonts/fontello.ttf') format("truetype"), url('http://www.wallaceerick.com.br/clientes/flat-ui/assets/fonts/fontello.svg#fontello') format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+body { 
+  font-family: Lato, Arial;
+  color: $select-color;
+  padding: 50px;
+  background-color: $background;
+}
+h1 {
+  font-weight: normal;
+  span {
+    font-size: 13px;
+    display: block;
+    padding-left: 4px;
+  }
+}
+
+.select-hidden {
+  display: none;
+  visibility: hidden;
+  padding-right: 10px;
+}
+.select {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  font-size: 16px;
+  color: $select-color;
+  width: $select-width;
+  height: $select-height;
+}
+.select-styled {
+  position: absolute; 
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $select-background;
+  padding: 8px 15px;
+  @include transition(all 0.2s ease-in);
+  &:after {
+    content:"";
+    width: 0;
+    height: 0;
+    border: 7px solid transparent;
+    border-color: $select-color transparent transparent transparent;
+    position: absolute;
+    top: 16px;
+    right: 10px;
+  }
+  &:hover {
+    background-color: darken($select-background, 2);
+  }
+  &:active, &.active {
+    background-color: darken($select-background, 5);
+    &:after {
+      top: 9px;
+      border-color: transparent transparent $select-color transparent;
+    }
+  }
+}
+
+.select-options {
+  display: none; 
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  z-index: 999;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: darken($select-background, 5);
+  li {
+    margin: 0;
+    padding: 12px 0;
+    text-indent: 15px;
+    border-top: 1px solid darken($select-background, 10);
+    @include transition(all 0.15s ease-in);
+    &:hover {
+      color: $select-background;
+      background: $select-color;
+    }
+    &[rel="hide"] {
+      display: none;
+    }
+  }
+}