Changing the background color of an ASP DropDownList using only CSS
Question
I'd like to be able to change the dropdownlist background colors on my C# web app, can I do this with CSS instead of having to name each dropdown separately?
In other words, I want to avoid having to do this:
private void Form_Load(object sender, EventArgs e)
{
comboBox1.BackColor = Color.Aqua;
comboBox2.BackColor = Color.Aqua;
comboBox3.BackColor = Color.Aqua;
etc
.
.
.
}
5 answers
solution1
0 2016-07-08 18:54:34
Use the CssClass property of the DropDownList and apply the class.
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="dropdownlist"></asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server" CssClass="dropdownlist"></asp:DropDownList>
<asp:DropDownList ID="DropDownList3" runat="server" CssClass="dropdownlist"></asp:DropDownList>
CSS:
.dropdownlist {
background-color: blue;
}
Another option is to create a Style object and apply that to your controls in the code behind.
// create your style here
Style style = new Style();
style.BackColor = System.Drawing.Color.Aqua;
// apply style to each one
comboBox1.Style = style;
comboBox2.Style = style;
comboBox3.Style = style;
solution2
0 2016-07-08 18:58:45
Loop through all your comboboxes and apply a css class.
public void foo(List<Control> foundSofar, Control parent)
{
foreach(var c in parent.Controls)
{
if(c is ComboBox) //Or whatever that is you checking for
{
c.Attributes.Add("style", "color: aqua");
}
}
}
solution3
0 2016-07-08 19:20:13
this a sample
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
select {
background-color: red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlTest" runat="server">
<asp:ListItem Value="1">One</asp:ListItem>
<asp:ListItem Value="2">Two</asp:ListItem>
<asp:ListItem Value="3">Three</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlTest2" runat="server">
<asp:ListItem Value="4">Four</asp:ListItem>
<asp:ListItem Value="5">Five</asp:ListItem>
<asp:ListItem Value="6">Six</asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
solution4
0 2016-07-08 20:09:53
Since a WebControl can contain child controls, you have to be recursive about it:
private void SetDropDownListBackGround(IEnumerable controls)
{
foreach (WebControl control in controls)
{
var list = control as DropDownList;
if (list != null)
{
list.BackColor = Color.Aqua;
}
SetDropDownListBackGround(control.Controls);
}
}
Called via
private void Form_Load(object sender, EventArgs e)
{
SetDropDownListBackGround(Page.Controls); //or whatever container
...
}
solution5
0 2018-10-02 15:55:34
I'm late to the party, but here's a nice article about how to change the background-color and other properties using CSS , even an example of one Dropdown with two rounded corners and the other two linear:
Source: https://parallelcodes.com/asp-net-dropdownlist-css-style/
CSS
.mydropdownlist1
{
color: #fff;
font-size: 20px;
padding: 5px 10px;
border-radius: 5px 12px;
background-color: #292929;
font-weight: bold;
}
ASPX
<asp:DropDownList runat="server" ID="ddlItems" CssClass="mydropdownlist">
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
<asp:ListItem Text="Four" Value="Four" />
<asp:ListItem Text="Five" Value="Five" />
<asp:ListItem Text="Six" Value="Six" />
<asp:ListItem Text="Seven" Value="Seven" />
<asp:ListItem Text="Eight" Value="Eight" />
<asp:ListItem Text="Nine" Value="Nine" />
<asp:ListItem Text="Ten" Value="Ten" />
</asp:DropDownList>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.