我在 Bootstrap 上有选择表单,我需要添加样式并使其如下图所示。请检查下面的 html
和 css
以获取此图像格式:
在图像上形成 html:
<form method="POST" action="/identify">
<div class="wrap">
<div class="search">
<input type="text" id="value" multiple="multiple" class="searchTerm" name="value" placeholder="Type your values">
<datalist id="val">
<option value="val">val</option>
</datalist>
<button type="submit" class="searchButton" name=form>
<i class="fa fa-search"></i>
</button>
</div>
</div><br>
</form>
在图像上形成 css:
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00B4CC;
border-right: none;
padding: 5px;
height: 50px;
border-radius: 0;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
width: 60px;
height: 66px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.wrap{
display: none;
width: 40%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
我的bootstrap选择表单代码:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<section>
<div class="container h-100">
<div class="wrap">
<div class="search">
<form action="/action" method="POST" class="form-inline">
<select id='sel' name='sel' class="selectpicker" multiple data-live-search="true">
<option value="value">value</option>
<option value="value">value</option>
<option value="value">value</option>
</select>
<button type="submit" class="btn btn-primary mb-2">Select</button>
</form>
</div>
</div>
<script type="text/javascript">
$('select').selectpicker();
</script>
</div>
</section>
我已经为图像上的表单添加了样式。但是如何将它添加到我的选择表单
中呢?
最佳答案
您所要做的就是删除 <div>
之间的所有内容就在你体内的标签 <section>
标签。我相信它应该看起来像这样。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<section>
<div class="container h-100">
<div class="wrap">
<div class="search">
<form action="/action" method="POST" class="form-inline">
<select id='sel' name='sel' class="selectpicker" multiple data-live-search="true">
<option value="value">value</option>
<option value="value">value</option>
<option value="value">value</option>
</select>
<button type="submit" class="btn btn-primary mb-2">Select</button>
</form>
</div>
</div>
<script type="text/javascript">
$('select').selectpicker();
</script>
</div>
</section>
</div>
</section>
https://stackoverflow.com/questions/62386830/
相关文章:
javascript - 从用户脚本订阅 Angular 路由器事件
javascript - 无法在 'pipeTo' : Illegal invocation 上执行
html - 有条件地禁用 JQuery 日期选择器上的星期几?
python - 如何使用 API 与 Google Colab 交互?
python - 如何在 PySpark window() 中使用毫秒作为参数。函数之间的范围?
javascript - 类型注释只能在 TypeScript 文件中使用。 TS(8010)
reactjs - Jest 测试在 react 加载中失败
python - ImportError : libX11. so.6: 无法打开共享对象文件: 没