样式DropDownList ASP.NET

时间:2013-06-06 17:26:06

标签: asp.net css html-select

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

enter image description here

我无法使用select标记,因为我已经将一些数据绑定到DropDownList。 基本上我试图从DropDownList中删除默认箭头按钮并将此图像添加为背景。有任何方法可以使用CSS执行此操作。 这是我用过的css

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

2 个答案:

答案 0 :(得分:2)

这样的东西?

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>

编辑:您可以添加带定位(div)的箭头。

编辑我把它放在jsfiddle中:http://jsfiddle.net/X4J3L/1/

答案 1 :(得分:0)

而不是使用一些第三方插件或jquery脚本,你应该使用ajax toolkit的组合框。看这里的例子

Combo box example