2011-09-22 18 views
-1

我有一個Div,裏面有一個表格(2x2)。我也有一個CSS文件,但我不遵循如何更改ASP.NET DropDown存在的表列的背景顏色。我想:CSS來改變ASP.NET服務器控件的背景顏色

編輯

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ddl1.WebForm1" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
    <link href="Stylesheet1.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <table> 
      <tr> 
       <td> 
        <asp:DropDownList ID="ddl1" runat="server"></asp:DropDownList> 
       </td> 
       <td></td> 
      </tr> 

      <tr> 
       <td> 
        <asp:DropDownList ID="ddl2" runat="server"></asp:DropDownList> 
       </td> 
       <td></td> 
      </tr> 
     </table> 
    </div> 
    </form> 
</body> 
</html> 

我嘗試的CSS:

body 
{ 
} 
table 
{ 
    border-color:Olive; 
    border-style:solid; 
    border-collapse:collapse; 
} 

table td 
{ 
    width:200px; 
} 

table.DropDownList 
{ 
    width:200px; 
    background-color:Gray; 
} 
+0

是這個DropDown元素的類名,它也叫DropDown?發佈簡單版本的表格代碼。 –

+0

顯示您的HTML輸出。 –

+0

不,我只是嘗試DropDown來覆蓋所有DropDown,因爲我使用了表格。沒有課程名稱。 – RKh

回答

2

的最佳答案不完整的HTML:

#form1 td { 
    background-color:Gray 
} 

編輯:

但是這樣會着色所有的單元格,即使那些不包含SELECT。

您需要使用JavaScript。 jQuery使這很容易:

$(document).ready(function() { 
    $('#form1 select').parent().css('background-color','Gray') 
} 
+0

但td將涵蓋所有其他列。我只想改變包含ASP DropDownList的列的顏色。 – RKh

+0

如果不使用JavaScript,你無法做到這一點。 CSS不能做到這一點。 –

+0

'select'會改變控件的顏色而不是表格單元格的顏色。 – RKh

0

它工作的標籤沒有css?

<asp:DropDownList backcolor="gray" ID="ddl1" runat="server"></asp:DropDownList> 

編輯

還,因爲它可能被渲染成HTML,你可能想改變選擇框的風格?..

select { 
    background-color: gray; 
} 

..你可以使用在功能範圍內,但只適用於選擇框 - 所以不完全是你想要的,沒有進一步的邏輯我認爲你只能去css-classes或id(用在td的):

td select { 
    background-color: gray; 
} 
+0

讓我清楚。我想改變單元格的背景顏色,而不是控件本身。 – RKh

+0

對不起..misunderstood –

+0

如果你對css感興趣並且它的選擇語法的可能性看一下http://www.w3.org/TR/CSS2/selector.html –