Build a Drop-Down list with new Style

I can create a simple drop-down list by this code
1
2
3
4
5
6
<select name="State" id="State" size="1">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
</select>





To change the style of color and margin I will use CSS like this:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.test_style{
 font-size: 16px;
 width: 200px;
 color: yellow;
 background: blue;
 margin: 1px 10px;
 border: 3px double black;
 padding: 1px;}

<select name="State" id="State" size="1" class="test_style">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
</select>





To change the down arrow by a new icon we can put the drop-down list in the DIV container element with Style.
I will use this icon


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 34px;
}

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(http://4.bp.blogspot.com/-PihXeIa6xzo/UIyx38KSisI/AAAAAAAAACs/uVrKfEx1oYo/s320/arrow-down-grey.png) no-repeat right #ddd;
}



1
2
3
4
5
6
7
<div class="styled-select">
<select style="padding:2px;" size="1" >
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
</div>





Create group in the Drop-Down List.
Some times I need to order the options in the list in groups, so I will change the display method to be list in groups.
I will use optgroup element which has two attributes:
label (required) and disabled (optional).

1
<optgroup label="Label_name">
or
1
<optgroup label="Label_name" disabled="true">

I will build a simple grouped drop-down list

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<select>
    <optgroup label="Group1">
        <option value="1">option_1</option>
        <option value="2">option_2</option>
        <option value="3">option_3</option>
    </optgroup>
    <optgroup label="Group2">
        <option value="4">option_4</option>
        <option value="5">option_5</option>
        <option value="6">option_6</option>
    </optgroup>    
    <optgroup label="Group3" disabled="true">
        <option value="7">option_7</option>
        <option value="8">option_8</option>
        <option value="9">option_9</option>
    </optgroup>
</select>




To add simple style to the list to be better.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
select {
    border:0;
    background:transparent;
    border:1px solid #d8d8d8;
    width:200px;
    -webkit-appearance: none;
    background-color:#DEEAF5;
}

.select_option_green{
 background: #FFFFFF;
 color:#008000
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<select>
    <optgroup label="Group1">
        <option value="1" class="select_option_green">option_1</option>
        <option value="2" class="select_option_green">option_2</option>
        <option value="3" class="select_option_green">option_3</option>
    </optgroup>
    <optgroup label="Group2">
        <option value="4" class="select_option_green">option_4</option>
        <option value="5">option_5</option>
        <option value="6">option_6</option>
    </optgroup>    
    <optgroup label="Group3" disabled="true">
        <option value="7">option_7</option>
        <option value="8">option_8</option>
        <option value="9">option_9</option>
    </optgroup>
</select>





If this post was good and helpful for you, Please give it Like.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment