How to apply css to dropdown list in asp.net

.NET
1

Hello all,

I am having a drop down list asp.net filled dynamically with the values from the database
Now I want to apply the css to the items in the drop down list.
i.e. The alternate ‘red’ and ‘navy’ color to the items in the drop down list.

Could any one help me please how should I apply css class to the items in drop down list.

Thanks,

2

Applying CSS to a dropdown is very much browser dependent.

3

Thanks sovan,

Yeah, But still I want to apply the css to the items added dynamically from the database in drop down list.

Any help will be appriciated.

4

After databinding the list execute something like this:

        for (int i = 0; i < DropDownList1.Items.Count; i++ )
        {
            DropDownList1.Items[i].Attributes["class"] = i % 2 == 0 ? "EvenItem" : "OddItem";
        }
5

Thanks,

But it doesn’t seem to work.Take a look at following code in ASP.Net.
Is something is wrong?

For i = 0 To DropDownList1.Items.Count - 1
If i Mod 2 = 0 Then
DropDownList1.Items(i).Attributes(“class”) = “even”
'DropDownList1.Items(i).Attributes.Add(“style”, “color:red”)
'DropDownList1.Attributes.CssStyle.Add(“color”,
'System.Drawing.Color.Navy.ToString())
Else
DropDownList1.Items(i).Attributes(“class”) = “odd”
'DropDownList1.Items(i).Attributes.Add(“style”, “color:navy”)
'DropDownList1.Attributes.CssStyle.Add(“color”,
'System.Drawing.Color.Navy.ToString())
End If
Next

6

cmd1.Attributes.Add(“style”, “background-color:red; color:white;”);

for (int i = 0; i < cmd1.Items.Count; i++)
{
if(i % 2 == 0)
cmd1.Items[i].Attributes.Add(“style”, “background-color:yellow; color:green;”);
else
cmd1.Items[i].Attributes.Add(“style”, “background-color:green; color:yellow;”);
}

Its behavior may change in accordance with the change of browsers.

7

hi, sovan,

I have tried the above also, but, I am also having this same

[/QUOTE] query.
I am running this application in mozilla firefox.
Could you please see the code below I have tried in ASP.Net.

[QUOTE]

If Not IsPostBack Then
Try
con = New SqlConnection(“connection string”)
con.Open()
Dim str As String = “select field name from table where some condition”
cmd = New SqlCommand(str, con)
dr = cmd.ExecuteReader
Dim count As Integer = 1
Dim i As Integer
If (dr.HasRows) Then
While dr.Read
DropDownList1.Items.Add(dr.Item(0))

                End While
            End If

            For i = 0 To DropDownList1.Items.Count - 1
                If i Mod 2 = 0 Then
                  
                    DropDownList1.Items(i).Attributes.Add("style", "color:red;")
                   
                Else
                   
                    DropDownList1.Items(i).Attributes.Add("style","color:navy;")
                End If
               
            Next

could you plese help me out.
Thanks in advance.

8

You are coding in VB.NET.

Both examples given above may work if you convert their examples from C# to VB.NET.

9

hi,

Thanks for reply.
but, I have already converted both the examples in VB.net(Web application).
One of them I have posted above. but, does not work in mozilla as well as internet explorer.

Please help me out. I am ruinnig this application in mozilla firefox.

10

It works for me? So I’m not sure if I could help you more other than this tip…

use ‘Using <varname> As <typename> = New <typename>(<params>)’ and ‘End Using’ when working with IDisposable derived classes.

11

hi,
I have tried all the things, but still i am not getting the results.
Could you please send me the detail code in VB.net (web application) as I have send above, With some modifications if required to run the application.

Is there any need to incliude any import statement for this application.

Thanks in advance.
Please help me out.

12

I have used the following statement:

DropDownList1.Items(i).Attributes(“style”) = “style=color:red;”

but, still not working.

Could anyone please help me.

Thanks,

13

Please look at the below statement instead of the above I have sent just now…

DropDownList1.Items(i).Attributes(“style”) = “color:red;”

Thanks;

14

protected override void OnInit(EventArgs e)
{

    if (!IsPostBack)
    {

cmd1.Attributes.Add(“style”, “background-color:red; color:white;”);

for (int i = 0; i < cmd1.Items.Count; i++)
{
if(i % 2 == 0)
cmd1.Items[i].Attributes.Add(“style”, “background-color:yellow; color:green;”);
else
cmd1.Items[i].Attributes.Add(“style”, “background-color:green; color:yellow;”);
}

}

}//End OnInit

The above code is running fine but with some difference in I.E. or FireFox.

15

hi, sovan,
Thanks, for reply. but it is still not working.
the code you have sent me just before 2 minutes, on which event I should apply this?

I have tried your earlier code like this

If Not IsPostBack Then
Try
con = New SqlConnection(“connection string”)
con.Open()
Dim str As String = “select field from table where IsAdmin=‘N’ and IsDeleted=0”
cmd = New SqlCommand(str, con)
dr = cmd.ExecuteReader
Dim count As Integer = 1
Dim i As Integer = 1
'If (dr.HasRows) Then
While dr.Read
DropDownList1.Items.Add(dr.Item(0))

            End While
            'End If
           
            If (dr.HasRows) Then
                //DropDownList1.Attributes.Add("style","background-color:white; color:red;")

                For i = 1 To DropDownList1.Items.Count - 1

                    If i Mod 2 = 0 Then
                        DropDownList1.Items(i).Attributes.Add("style", "background-color:yellow; color:green;")
                       
                    Else
                     
                       
                                               
                        DropDownList1.Items(i).Attributes.Add("style", "background-color:green; color:yellow;")
                      
                    End If


                Next
            End I

now, on which event I should write the above code you have just sent me (OnInit) in VB.net(web application) not in c#

Is there any need to include the imports statement for this.

Please help me out.
Thanks in advance.

16

hi, sovan

It applies only the statement which is outside the for loop and not the statements which are inside the for loop. If I acoomment the statement which is outside the for loop, the inside staements does not work at all.

Please help me.

17

<select name=“ctl00$ContentPlaceHolder1$cmd1” id=“ctl00_ContentPlaceHolder1_cmd1” style=“background-color:red; color:white;” >
<option value=“0” style=“background-color:yellow; color:green;” >0</option>
<option value=“1” style=“background-color:green; color:yellow;” >1</option>
<option value=“2” style=“background-color:yellow; color:green;” >2</option>
<option value=“3” style=“background-color:green; color:yellow;” >3</option>
:
:
:
</select>

If I create view source of my page, I find my dropdownlist like above.
Please check yours.

Thank you.

18

hi,
I am getting the following view source in Page_Load and even on Page_Init event.

<select name=“DropDownList1” onchange=“__doPostBack(‘DropDownList1’,‘’)” language=“javascript” id=“DropDownList1” style=“background-color:white; color:red;”>
<option value=“SELECT”>SELECT</option>

&lt;option value="Shivanee"&gt;Shivanee&lt;/option&gt;
&lt;option value="Kanchan"&gt;Kanchan&lt;/option&gt;
&lt;option value="swati"&gt;swati&lt;/option&gt;

</select>

Thanks
Please help me.

19

Are you writing your code in Page_Load Event ?

Try to write the code in OnLoadComplete event .

Thank you.

20

Hi,
I have tried the whole code from connection string to applying css in "If not page.IsPostBack condition in the Page_Init method which is inside the region.

But, tell me, shoul I write this before the InitializeComponent() method or after this method in my VB.net code??

Any help is appriciated.

Thanks.