Sameera R.
Sameera R.

Reputation: 4572

How to remove or modify Dropdown Arrow head?

select {
background: #f7f7f7;
border: 1px solid #cacaca;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 4px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 300;
font-size: 14px;}

this is my current styles. is there any way to remove or modify the dropdown arrow head?

this is the dropdown list

@Html.DropDownListFor(m => m.MonthlyComparisonFilter.DurationOperater, durationList)

Upvotes: 1

Views: 90

Answers (2)

user3994030
user3994030

Reputation:

dropDownButton.ShowDropDownArrow = false;

Upvotes: 2

fquirogam
fquirogam

Reputation: 31

I think you want to do this:

add this to your select css

Firefox

{
  -webkit-appearance:none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  -ms-appearance:window;
  overflow:hidden;
}

and this for IE:

select::-ms-expand {
    display: none;
}

http://jsfiddle.net/S6yTm/

Upvotes: 2

Related Questions