Styling asp:DropDownList with CSS

Question

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 on my side, have your properly included style sheet? — Siraj Hussain
– Siraj Hussain, Commented Jan 7, 2016 at 13:15
@SirajHussain Thank you. I've not done that and now it works perfectly fine. First time CSS and you just saved me. — Kohnarik
– Kohnarik, Commented Jan 7, 2016 at 13:21

Siraj Hussain · Accepted Answer · 2016-01-07 13:25:57Z

2

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

answered Jan 7, 2016 at 13:25

Siraj Hussain

8749 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kohnarik Over a year ago

Adding <link href="CustomDropDown.css" rel="stylesheet" type="text/css" /> did the trick. What a silly mistake.

Siraj Hussain Over a year ago

It happens some times :)

Alvaro Menéndez · Accepted Answer · 2016-01-07 12:49:06Z

0

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

answered Jan 7, 2016 at 12:49

Alvaro Menéndez

9,0523 gold badges41 silver badges59 bronze badges

8 Comments

Kohnarik Over a year ago

I see. I've changed the tags to tags which are definitely unique, but it still does not work. does ASP.net even support style changes on their DropDownLists?

Alvaro Menéndez Over a year ago

yes, it does if You call the elements properly. be sure your css sheet is working propely adding on top something like body{background-color:red;} to check if the css sheet is working.

Kohnarik Over a year ago

I've done that, but I see absolutely nothing. I've defined the CSS as a class and referred to that class in the "CssClass" property of the DropDownList, but it doesn't work. I can't seem to figure out what I did wrong.

Reporter Over a year ago

@Kohnarik Have you checked your HTML code with Firebug (Firefox) or Webtools (Chrome)?

Drew Kennedy Over a year ago

In the code shown in the OP you have your select class, but you're still calling the element directly. Is this possibly the problem?

|

Collectives™ on Stack Overflow

Styling asp:DropDownList with CSS

2 Answers 2

2 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related