html - CSS中的下拉文本框设计
问题描述
我想创建一个像引导程序这样的下拉框。即使我创建了它,但实际上我需要它在简单的 css 中。因为当我在我的页面上使用引导文件时,由于我从未在我的网站上添加任何与代码相关的引导程序,所有甲酸盐都会出错。
在我要创建的图像下方。
下面是我使用 un bootstrap 的代码,它看起来像上图。但我不知道我是如何在 css 中做到这一点的。
请任何人帮助我,我如何在没有引导程序的情况下在 CSS 中制作下拉文本框,如上图。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<div class="form-group col-md-6 col-lg-6 col-sm-6">
<label>Title</label>
<select id="txtTitle" class="form-control selectpicker">
<option value="default">Please Select</option>
<option value="one">One</option>
<option value="two">Two</option>
</select>
</div>
<div class="form-group col-md-6 col-lg-6 col-sm-6">
<label>Choose Activities</label>
<select id="DDLActivites" data-style="btn-default" class="selectpicker form-control" multiple data-max-options="2">
<option>Mustard</option>
<option>Barbecue</option>
</select>
</div>
解决方案
使用 select2 查看此示例。直接来自 select2 网站。
http://jsfiddle.net/r0yh3b4o/1/
<select class="js-example-basic-single" name="state" style="width:100%">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
推荐阅读
- python - scipy.optimize.least_squares 中未知参数的动态范围和成本函数的形式
- android - 为什么我不能从 sqlite 数据库中获取用户 ID
- vba - 如何将我的宏更改为 Worksheet_Change 事件 Excel VBA
- javascript - 我可以为一个元素中的一个属性分配多个 data-id 值吗?
- python - 使用 Tensorflow 轻松检查自定义渐变
- java - org.apache.http.conn.HttpHostConnectException:连接到 http://localhost 被拒绝
- c# - 组合框 - 初始值是正确的,之后的任何调用都会在投射期间出现错误
- azure - Azure SQL PaaS 和 Azure Policy 交互
- python - 无法导入木偶
- android - 迁移到 Gradle 3.0.0 时出现foregroundInsidePadding 错误