简体   繁体   中英

Styling asp:DropDownList with CSS

I have created a small CSS, which I wanted to use to make my own styled DropDownList. I don't know if there is some sort of incompatibility and I'm still learning CSS and ASP.net, but when I tried my code in an online CSS tester, it worked perfectly.

.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;
}

This is my DropDownList:

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

Unfortunately, this does not work. Have I done something wrong or is it just not possible?

Edit: After adding the following line to my aspx, it worked:

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

This is working fine. Please make sure you have properly included style sheet.

IF you are not calling your element by own created classes, you may need to inspect with chrome (or similar) your html.

calling the css by generic tags as "label" often won't work as a asp:Label use to be translated into an html span , not a html label

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM