设计ASP DropDownList的难度 [英] Difficulty in Styling ASP DropDownList

问题描述

大家好，



有谁知道我如何设计asp下拉列表？下拉列表的箭头很难改变，这就是最初的样子：

http： //i.stack.imgur.com/n9MFy.png [ ^ ]



有没有人有任何解决方案来修复或设计这个asp下拉列表？

这是我的代码：< b>（我无法将其更改为选择下拉列表，因为我的下拉列表选项是根据列表框中的选择动态填充的）

 // asp文件
 <   asp：DropDownList     ID   =  NewDropDownList    runat   =  server   宽度  =   136px    OnSelectedIndexChanged  < span class =code-keyword> =  jobRun_SelectedIndexChanged    AutoPostBack   =  True   >  
 <   / asp：DropDownList  >  

 < span class =code-comment> //   cs file  
  public   void  BindNewDropDownList（）
 {
  //  丢失以保存值 
 List< DateTime> listCopy =  new  List< DateTime>（）; 
 DateTime dt; 
  string  values =  String  .Join（  ，，JOBRUN_CBL.Items.Cast< ListItem>（）。Where（i = >  i.Selected）。选择（i = >  i.Text））; 
  if （values.Contains（ 选择全部））
 {
  //  遍历列表框中的每个项目然后将其添加到列表 
  foreach （ListItem li  in  ListBox1.Items） 
 {
  if （DateTime.TryParse（li.Text， out  dt） ）
 {
 listCopy.Add（dt）; 
} 
} 
} 
 其他 
 {
  //  遍历列表框中的每个项目，然后将其添加到列表 
  foreach （ListItem li  in  ListBox1.Items）
 {
  //  检查是否选择了项目 
 如果（li.Selected ==  true ）
 {
  //  将项目添加到列表 
 listCopy.Add（DateTime.Parse（li.Text））; 
} 
} 
} 
 
  //  比较排序，以便最新日期排在最前面 
 listCopy.Sort（（x，y）= >  y.CompareTo（x） ）; 
  //  清除下拉列表中的项目 
 NewDropDownList.Items.Clear（） ; 
  //  将数据源设置为下拉列表 
 NewDropDownList.DataSource = listCopy; 
  //  在dropdownlist中设置dateformatstring  
 NewDropDownList.DataTextFormatString =   {0：dd-MMM-yyyy}; 
  //  绑定下拉列表 
 NewDropDownList.DataBind（）; 
} 

这是我尝试的但是即使我在背景图片中添加了同样的下拉箭头仍然存在：

 <   asp：DropDownList     ID   =  NewDropDownList    runat   =  server   宽度  =  136px    OnSelectedIndexChanged   =  ddl_SelectedIndexChanged    Aut oPostBack   = 真    CssClass   =  ddl    xmlns：asp   = ＃unknown >  
 <   / asp：DropDownList  >  
 

。ddl {
宽度：268px; 
填充：5px; 
字体大小：16px; 
 line-height： 1 ; 
 background-color：lightblue; 
颜色：黑色; 
 border-color：blue; 
 border： 0 ; 
 border-radius：5px; 
身高：34px; 
 background：url（http： //   cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/ 16x16 / br_down.png）不重复右边的浅蓝色;  
 -moz-appearance：none;  / *   FF * /  
 -webkit-appearance：none;  / *   Chrome，Safari * /  
外观：无; 
 background-position-x：244px; 
 border：solid 1px #ddd; 
} 

这是我目前根据我的尝试获得的输出：

http://i.stack.imgur.com/n9s0C.png [ ^ ]

请帮我解决这个问题，已经找了很长时间的解决方案，但仍然无法找到装饰它的方法。



谢谢。

解决方案

嗯，下拉列表的样式是供应商特定的。所以你需要为所有这些改变它。请参阅

 <   asp：dropdownlist     id   =  NewDropDownList    runat   =  server    width   =  136px    cssclass   =  ddl    onselectedindexchanged   =  jobRun_SelectedIndexChanged    autopostback   =  True    xmlns：asp   = ＃unknown  >  <   / asp：dropdownlist  >  

。 ddl  {
  width  ：  268px;  
  padding  ：  5px;  
  font-size  ：  16px;  
  line-height  ：  1;  
  border  ：  0;  
  border-radius  ：  5px;  
  height  ：  34px;  
  背景 ：  url（http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png）no-repeat right #fff;  
   -  moz-appearance  ：  none;   / *   FF * /  
  -webkit-appearance  ：  none;   / *   Chrome，Safari * /  
 外观 ：  none;   
  background-position-x  ：  244px;  
  border  ：  solid 1px #ddd;  
 } 

粗体文字非常重要。 :)

一个非常好的演示是这里 [ ^ ]。



-KR

hi all,

does anyone know how can I style a asp dropdownlist? The arrow of the dropdown is difficult to change, this is how it looks like initially:
http://i.stack.imgur.com/n9MFy.png[^]

Does anyone has any solution to fix or style this asp dropdownlist?
This is my code: (I could not change this into select dropdownlist because my dropdownlist options are being populated dynamically based on selection from a listbox)

//asp file
            <asp:DropDownList ID="NewDropDownList" runat="server" Width="136px" OnSelectedIndexChanged="jobRun_SelectedIndexChanged" AutoPostBack="True" >  
            </asp:DropDownList>

//cs file
 public void BindNewDropDownList()
        {
                        //Lost to hold the values
                        List<DateTime> listCopy = new List<DateTime>();
                        DateTime dt;
                        string values = String.Join(", ", JOBRUN_CBL.Items.Cast<ListItem>().Where(i => i.Selected).Select(i => i.Text));
                        if (values.Contains("Select All"))
                        {
                            //Loop through each items in listbox and then add it to list
                            foreach (ListItem li in ListBox1.Items)
                            {
                                if (DateTime.TryParse(li.Text, out dt))
                                {
                                    listCopy.Add(dt);
                                }
                            }
                        }
                        else
                        {
                            //Loop through each items in listbox and then add it to list
                            foreach (ListItem li in ListBox1.Items)
                            {
                                //check if item is selected
                                if (li.Selected == true)
                                {
                                    //add items to list
                                    listCopy.Add(DateTime.Parse(li.Text));
                                }
                            }
                        }

                        //compare and sort so that the latest date comes on top
                        listCopy.Sort((x, y) => y.CompareTo(x));
                        //clear the items in dropdownlist
                        NewDropDownList.Items.Clear();
                        //set the datasource to dropdownlist
                        NewDropDownList.DataSource = listCopy;
                        //set the dateformatstring in dropdownlist
                        NewDropDownList.DataTextFormatString = "{0:dd-MMM-yyyy}";
                        //Bind the dropdownlist
                        NewDropDownList.DataBind();
}

This is what I have tried but the same dropdown arrow is still there even though I added in a background image:

<asp:DropDownList ID="NewDropDownList" runat="server" Width="136px" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="True" CssClass="ddl" xmlns:asp="#unknown">
           </asp:DropDownList>

.ddl{
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    background-color:lightblue;
    color:black;
    border-color:blue;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right lightblue;
    -moz-appearance: none; /*FF*/
    -webkit-appearance: none;  /*Chrome, Safari*/
    appearance: none;
    background-position-x: 244px;
    border:solid 1px #ddd;
}

This is the output I get currently based on what I have tried:
http://i.stack.imgur.com/n9s0C.png[^]
Please help me on this, been finding solution for this for quite sometime but still cannot find a way to decorate it.

Thanks.

解决方案

Well, the style of the dropdown is vendor specific. So you need to change it for all of them. See,

<asp:dropdownlist id="NewDropDownList" runat="server" width="136px" cssclass="ddl" onselectedindexchanged="jobRun_SelectedIndexChanged" autopostback="True" xmlns:asp="#unknown"></asp:dropdownlist>

.ddl{
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #fff;
    -moz-appearance: none; /*FF*/
    -webkit-appearance: none;  /*Chrome, Safari*/
    appearance: none;
    background-position-x: 244px;
    border:solid 1px #ddd;
}

The bold text is important. :)
One quite good demo is here[^].

-KR

这篇关于设计ASP DropDownList的难度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！