Question

我创建了一个小CSS，我想用它来创建自己的样式DropDownList。我不知道是否存在某种不兼容性，我还在学习CSS和ASP.net，但是当我在一个在线CSS测试器中尝试我的代码时，它运行得很好。

.select {
  padding: 3px;
  margin: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
  box-shadow: 0 3px 0 #212121, 0 -1px #191919 inset;
  background: #333;
  color: #fff;
  border: none;
  outline: none;
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  select {
    padding-right: 18px;
  }
}

label {
  position: relative;
}

label:after {
  content: '<>';
  font: 11px "Consolas", monospace;
  color: #fff;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 8px;
  top: 2px;
  padding: 0 0 2px;
  border-bottom: 1px solid #ddd;
  position: absolute;
  pointer-events: none;
}

label:before {
  content: '';
  right: 6px;
  top: 0px;
  width: 20px;
  height: 20px;
  background: #333;
  position: absolute;
  pointer-events: none;
  display: block;
}

这是我的DropDownList：

<asp:DropDownList CssClass="select" id="DropPoke1" Width="80" runat="server" AutoPostBack="true" ViewStateMode="Enabled" EnableViewState="true" OnSelectedIndexChanged="DropPoke1_SelectedIndexChanged" />

不幸的是，这不起作用。我做错了什么或者是不可能的？

编辑：将以下行添加到我的aspx后，它可以工作：

<link href="CustomDropDown.css" rel="stylesheet" type="text/css" />

Answer 1

这很好用。请确保您已妥善包含样式表。

Answer 2

如果您没有通过自己创建的类调用元素，则可能需要使用chrome（或类似）html进行检查。

通过通用标签调用css为＆＃34;标签＆＃34;通常不会被用作asp:Label用于翻译成html span，而不是html label

使用CSS设计asp：DropDownList

2 个答案: