Thursday, December 8, 2016

On Twitter now

Hey guys,

Just wanted to inform you that you can now find me on Twitter

Hope you see you there.

Have a great day!

Monday, July 11, 2016

Custom select dropdown menu style


After trying several ways I ended up with this solution to style the HTML select list. This involves little tweaking of html and addition of few lines of jquery which is absolutely fine to use when we get the expected result :) 

Here is the method which I have been following to make the list items looks more classy.

Get started with the html first. Here I am wrapping the select list with an outer div which makes safe place for both select list as well as a span tag which is used to manipulate the design.

Here I am placing the list items on top of span tag which gives the exact look and feel of select list.

You can design it according to your requirement. I have used a simple corner arrow here. 


HTML

<div class="wrapper">
  <div class="select_box">
     <span class="cus_selt">Select a value*</span>
     <select>
        <option>Select</option>
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
        <option>option5</option>
        <option>option6</option>
        <option>option7</option>
      </select>
   </div>
 </div>

CSS

.wrapper{width:250px;margin:10px auto;}
.select_box{
  margin:0;
  width:100%;
 font-family:arial;
 position:relative; 
 background-color:#eee; 
}
.select_box > span:after{content:'';width:0; 
  height:0; 
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid #FD025F;
  position:absolute;
  bottom:-1px;
  z-index:2;
  right:-6px;
transform:rotate(-45deg);
}
.select_box > span{padding:20px;display:block;}
select {
float:left;
height: 56px;
margin: -58px 0 0;
opacity: 0;
width: 100%;
filter: alpha(opacity=0);

}

Jquery

$( ".select_box" ).change(function() {
  var option = $(this).find('option:selected').val();
  $('.select_box > span').text(option);

});