use*_*513 6 javascript css3 angularjs angularjs-directive ionic-framework
你能告诉我如何在图像中显示下拉.我在这里使用离子框架我正在使用下拉列表
这是我的代码
我希望像展示图片一样制作图片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>
您可以通过将标签留空并select使用CSS 覆盖样式来实现此目的.
尝试一些像这样.
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;
}