CODEWITHSUNDEEP
angularjsuser-interfaceionic-frameworkdropdown
Andres
Andres

Reputation: 123

Angular - Ionic: Make select dropdown look like a text link

So I'd like to make the select tag dropdown look like a normal text link, but when clicked have it still activate ionics select (mobile dropdown) feature.(http://ionicframework.com/docs/components/#select)

This plunkr down below shows the look of the dropdown box I don't want. Can anyone help me turn the dropdown box into a text link please!

  <select ng-model="myColor" ng-options="color.name for color in colors"></select>

https://plnkr.co/edit/A9ycYBKC1GUDhpCiskr5?p=preview

Upvotes: 0

Views: 428

Answers (2)

Larry Turtis
Larry Turtis

Reputation: 1916

One possibility is to remove the select entirely and mock it using an unordered list. Example.

  <a href="" ng-init="show = true" ng-click="show = !show">Link</a>
  <ul ng-if="show">
  <li ng-repeat="color in colors">
    <a href="" ng-click="setColor(color)">{{color.name}}</a>
  </li>
  </ul>

Upvotes: 0

Ethan May
Ethan May

Reputation: 1292

Adding the following to your plunker works:

<style>
    select{
        -webkit-appearance:none;
        outline: none;
        border: none;
        background: none;
        color: blue;
        text-decoration: underline;
    }
</style>

Upvotes: 1

Related Questions