样式下拉列表 ASP.NET答案

【问题标题】：Styling DropDownList ASP.NET样式下拉列表 ASP.NET
【发布时间】：2014-01-05 07:47:17
【问题描述】：

您好，我正在尝试在我的 ASP.NET 网络应用程序中使我的 DropDownList 像这样。

我不能使用select 标记，因为我已经将一些数据绑定到 DropDownList。基本上我正在尝试从DropDownList 中删除默认箭头按钮并将此图像添加为背景。有任何方法可以使用CSS 来做到这一点。这是我用过的css

.drop-down-style
{
  width:150px;
  height:20px;
  border:solid 2px #a3a4a6;
  background-image:url('../Images/DropDownImage.gif');
}

【问题讨论】：

noupe.com/css/… ryanfait.com/resources/custom-checkboxes-and-radio-buttons/… bavotasan.com/2011/style-select-box-using-only-css 但要知道这可能不适用于所有浏览器
我想你的问题可以在这里回答：[stackoverflow.com/questions/458657/…. [1]：stackoverflow.com/questions/458657/…

标签： asp.net css html-select

【解决方案1】：

这样的？

CSS：

.styled-select {
    width: 308px;
    height: 23px;
    overflow: hidden;
    background:url(arrow_xs.png) no-repeat 225px #FFF;
    border: 1px solid #ccc;
}
.styled-select select {
    background: transparent;
    width: 309px;
    padding-right: 4px;
    padding-bottom:7px;
    padding-left: 4px;
    padding-top: 0px;
    font-size: 12px;
    line-height: 1;
    border: none;
    border-radius: 0;
    height: 34px;
    -webkit-appearance: none;
}

HTML

<div class="styled-select">
    <select>
        <option>First option</option>
        <option>Second option</option>
    </select>
</div>

edit：您可以添加带定位的箭头 (div)。

edit 我把它放在一个 jsfiddle 中给你：http://jsfiddle.net/X4J3L/1/

【讨论】：

【解决方案2】：

宁可使用一些第三方插件或 jquery 脚本，你应该使用 ajax 工具包的组合框。在这里看一个例子

Combo box example

【讨论】：