如何在離子中制作下拉列表或選擇框
[英]how to make dropdown or select box in ionic
問題描述
你能告訴我如何在圖像中顯示下拉。我在這里使用離子框架我正在使用下拉列表
這是我的代碼
我希望像展示圖片一樣制作圖片http://ionicframework.com/docs/components/#select
我想只下拉如圖像所示（左邊的默認文本）。我想減少文檔中下拉列表的寬度（因為它占據了整個寬度）。其次我不想顯示任何來自drop的文本下
這是我的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<div> View</div>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option selected>Default</option>
<option >Green</option>
<option>Red</option>
</select>
</label>
</div>
</ion-content>
</ion-pane>
</body>
</html>
4 個解決方案
解決方案1
9 已采納 2015-07-12 16:31:24
您可以通過將標簽設置為空白並使用CSS覆蓋select樣式來實現此目的。
嘗試一些像這樣 。
HTML：
<label class="item item-input item-select">
<div class="input-label">
</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;
}
解決方案2
4 2015-08-12 13:16:28
<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>
解決方案3
1 2015-12-01 08:06:25
這對我有用：
模板：
<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%;
}
解決方案4
0 2016-06-07 11:20:46
.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>
如何制作一個下拉框（選擇元素）以接受html中的文本搜索？
[英]How to make a dropdown box(select element) to accept text search in html?
如何從多行的選擇下拉框中制作自動填充輸入文本？
[英]How to make autofill input text from a select dropdown box with multiple lines?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.