Not able to apply class to ng-options or options in selectbox

Asked May 21 '17 at 07:05

Active May 21 '17 at 07:05

Viewed 41 times

I want to make a selectbox with a reset button which resets the value to default.

I tried this with ng-options and without it, following plunk have the code:

With ng-options: Plunk

Without ng-options: Plunk

Now the reset button works perfectly fine in both of them but I want to customize the select CSS and I have added classes for it but somehow it's not working, I want the select box to look something like this:

I am using bootstrap with some customization for CSS.

This StackOverflow question is quite similar to my problem but they are applying CSS to the values however, I want the selectbox to be customized.

edited May 23 '17 at 11:55

Community

asked May 21 '17 at 07:05

Aayushi Jain

2,861
2
29
36

please create plunker with customize css. – Hadi J May 21 '17 at 07:09
The css added to `select-order` class in the css for the selectbox which works fine if I write it in `style` attribute rather than `class` but when the dropdown opens up, I want this CSS `padding: 3px 20px; line-height: 1.42857143;`, I don't know how to show it – Aayushi Jain May 21 '17 at 07:21
you cant style dropdownlist except the color change with html select. You need to create your own module or try ui-select – Alaksandar Jesus Gene May 21 '17 at 07:46
@Alaksandar: I am trying with `ui-select` but the `model` is not updating, here is the code: http://jsfiddle.net/Lv9mo66a/489/ – Aayushi Jain May 21 '17 at 08:07
1

http://jsfiddle.net/Lv9mo66a/491/ – Alaksandar Jesus Gene May 21 '17 at 08:44
1

You need to initiate the selected as a object. I missed it out. Here is the revised version without using on-select. jsfiddle.net/Lv9mo66a/493 – Alaksandar Jesus Gene May 21 '17 at 09:00
@Alaksandar: That does the job, thanks! – Aayushi Jain May 21 '17 at 09:57

Not able to apply class to ng-options or options in selectbox

0 Answers0