CODEWITHSUNDEEP
c#cssasp.net
Kohnarik
Kohnarik

Reputation: 377

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

Upvotes: 0

Views: 2644

Answers (2)

Siraj Hussain
Siraj Hussain

Reputation: 874

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

Upvotes: 2

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

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

Upvotes: 0

Related Questions