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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUZdjswB1OjRnaJ26iyXe4iIaAzyxztA-5tk6JGv3TpageA2gfFIIIvuHY_Kh1YKbaUpNBfQ4IJehvUNFMcsGaY_NMXdoLQGoGGaUxr3NHTDaPCT1ZRtLWG1sBwPrDVzPBfRd-3eIR7Sqk/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

Subscribe to: Post Comments ( Atom )