如何风格asp.net下拉列表 [英] How to style asp.net dropdownlist

问题描述

您可能会觉得这是一个重复的问题，但我有一个Asp：DropDownList，需要如下图所示的样式。

我浏览了谷歌和一些

任何人都可以帮助我吗？

>

谢谢

> HTML

 < asp：DropDownList ID =DropDownList1runat =serverWidth =120px BackColor =＃F6F1DBForeColor =＃7d6754font-Names =AndalusCssClass =ddl> 
< asp：ListItem Text =DEPART FROM>< / asp：ListItem> 
< / asp：DropDownList> 
  

CSS

strong>

 < style type =text / css> 
 .ddl 
 {
 border：2px solid＃7d6754; 
 border-radius：5px; 
 padding：3px; 
 -webkit-appearance：none; 
 background-image：url（'Images / Arrowhead-Down-01.png'）; 
 background-position：88px; 
 background-repeat：no-repeat; 
 text-indent：0.01px; / *在Firefox中* / 
 text-overflow：''; / *在Firefox中* / 
} 
< / style> 
  

检查我在Chrome中看到的屏幕截图，我还附上了下拉箭头图片-01.png）。希望这有助于你。

截图

img src =https://i.stack.imgur.com/vPYp5.pngalt =enter image description here>

箭头下-01.png

You may feel it is a repeated question, but I have a Asp:DropDownList which needs to be styled like the below picture.

I browsed through Google and some sites (mentioned in Stack), but I couldn't get the expected outcome.

Can anybody help me in this?

Thanks in advance..

解决方案

Try the following code

HTML

<asp:DropDownList ID="DropDownList1" runat="server" Width="120px" BackColor="#F6F1DB" ForeColor="#7d6754" Font-Names="Andalus" CssClass="ddl">
    <asp:ListItem Text="DEPART FROM"></asp:ListItem>
</asp:DropDownList>

CSS
EDIT

<style type="text/css">
        .ddl
        {
            border:2px solid #7d6754;
            border-radius:5px;
            padding:3px;
            -webkit-appearance: none; 
            background-image:url('Images/Arrowhead-Down-01.png');
            background-position:88px;
            background-repeat:no-repeat;
            text-indent: 0.01px;/*In Firefox*/
            text-overflow: '';/*In Firefox*/
        }
</style>

Check the screenshot which I got in Chrome also I am attaching the dropdown down arrow image(Arrowhead-Down-01.png).Hope this helps you.

Screenshot

Arrowhead-Down-01.png

这篇关于如何风格asp.net下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！