Question

你可以告诉我如何在图像中显示下拉。我正在使用离子框架来自here我正在使用下拉列表

这是我的code

我希望像展示图片http://ionicframework.com/docs/components/#select

那样制作

我想只按下图像所示的下拉（左边的默认文本）。我想减少文档中下拉列表的宽度（因为它取整个宽度）。其次我不想显示任何文字从下拉列出

这是我的代码

    FoundationApi.subscribe('topMenu', function(event) {
        if (event === 'close') {
            $rootScope.menuClosed = true;
        } else if (event === 'open') {
            $rootScope.menuClosed = false;
        } else { 
            // event === 'toggle'
            $rootScope.menuClosed = !$rootScope.menuClosed;
        };
    })

Answer 1

您可以将标签设为空白并使用CSS覆盖select样式。

尝试类似this的内容。

HTML：

<label class="item item-input item-select">
    <div class="input-label">
        &nbsp;
    </div>
    <select>
        <option selected>Default</option>
        <option >Green</option>
        <option>Red</option>
    </select>
</label>

CSS：

.item-select {
  width: 75%; /* Or whatever you'd like the width to be */
}

.item-select select {
  left: 0;
}

Answer 2

<div class="list">

  <label class="item item-input item-select">
    <div class="input-label">
      Lightsaber
    </div>
    <select>
      <option>Blue</option>
      <option selected>Green</option>
      <option>Red</option>
    </select>
  </label>

</div>

Answer 3

这对我有用：

模板：

  <ion-item class="item-input item-select">
    <div class="input-label">
      Select Label
    </div>
    <select>
      <option selected>Option 1</option>
      <option>Option 2</option>
    </select>
  </ion-item>

<强> CSS：

.item-select select,  .item-select select option{
  left: 75%;
}

Answer 4

.item-select {
    height: 40px;
}

.item-select select {
    max-width: 100%;
    width: 100%;
}

<div class="list">
    <label class="item item-input item-select">
        <select>
            <option selected>Default</option>
            <option>Green</option>
            <option>Red</option>
        </select>
    </label>
</div>

如何在离子中制作下拉列表或选择框

4 个答案: