如何风格asp.net的DropDownList [英] How to style asp.net dropdownlist

问题描述

您可能会觉得这是一个重复的问题，但我有一个天冬氨酸：DropDownList的需要被样式像下面的图片

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?

在此先感谢..

推荐答案

请尝试以下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 结果
修改

<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>

检查我在Chrome中也得到了我附上下拉向下箭头图像的截图（箭头向下-01.png）。希望这可以帮助你。

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.

屏幕截图

箭头向下-01.png

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