你能改变datalist选项的风格吗?

时间:2017-08-23 10:06:46

标签: css html5

我按照this链接上的解决方案在datalist中使用包含而不是以start开头的输入字段过滤器选项。解决方案有效,但我的显示有问题。选项在选项列表中显示“value”和“innerText”,如下所示:

datalist option list

我想要做的是让第一行变得更小而第二行更大但我不确定这是否可行以及我应该为此设计哪种元素。

这是我的html代码:

            <div class="inputFieldBorder item item-input">
                <div class="row">
                <input type="text"
                       name="prodList"
                       id= "prodList"
                       maxlength = "50"
                       placeholder = "Things to Buy"
                       ng-model="listData.header.newProduct"
                       list="productlist">
                    <datalist id="productlist">
                        <select >&nbsp;
                            <option ng-repeat="productname in allproducts" value="{{productname.productName}}">{{productname.productName}}</option>
                        </select>
                    </datalist>
                    <button ng-disabled="!listData.header.newProduct"
                      class="button button-icon ion-android-close input-button"
                      ng-click="clearSelection()"></button>
                    </div>
            </div>

0 个答案:

没有答案