bootstrap下拉列表与输入框组结合的样式调整
作者:ahl123 时间:2024-04-22 13:25:02
输入框组默认是div.input-group
已知可在input表单元素前后加入两类元素【分别是文本和按钮】如下所示:
div.input-group-addon{文字或符号}
input.form-control
div.input-group-btn
其中按钮还可嵌套下拉菜单(包括分裂式下拉菜单)
一、基本用法如下:
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default"> 提交2 </button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">首页1</a></li>
<li><a href="">首页2</a></li>
<li><a href="">首页3</a></li>
<li><a href="">首页4</a></li>
</ul>
</div>
</div>
效果如下:
二、将按钮嵌套的下拉菜单改为下拉列表,并调整样式:
<div class="input-group input-group-lg">
<span class="input-group-addon">@2</span>
<input type="text" class="form-control">
<div class="input-group-btn input-group-lg">
<select name="" id="idsel" class="form-control" style="
width:150px;
padding:3px 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background:url(img/arrow.jpg) no-repeat right center;
background-color: #eee;
background-size:20%;
">
<option value="">@163.com</option>
<option value="">@gmail.com</option>
<option value="">@gsafc.com</option>
<option value="">@qq.com</option>
</select>
</div>
</div>
效果如下:
其中,背景图片arrow.jpg如下:
这样就可实现下拉菜单选择邮箱后缀的效果
以上所述是小编给大家介绍的bootstrap下拉列表与输入框组结合的样式调整网站的支持!
来源:http://maplebb.blog.51cto.com/2547849/1859106
标签:bootstrap,下拉列表,输入框组
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Navicat for SQLite导入csv中文数据的方法
2024-01-22 18:56:26
![](https://img.aspxhome.com/file/2023/1/110341_0s.jpg)
python源码剖析之PyObject详解
2023-08-02 14:07:03
![](https://img.aspxhome.com/file/2023/5/61975_0s.png)
Go 语言进阶单元测试示例详解
2024-02-07 18:17:06
![](https://img.aspxhome.com/file/2023/6/101696_0s.png)
详解Python中的List
2023-11-20 05:37:39
![](https://img.aspxhome.com/file/2023/7/63877_0s.png)
Django如何继承AbstractUser扩展字段
2023-08-24 06:19:27
python读取目录下所有的jpg文件,并显示第一张图片的示例
2023-06-21 16:31:58
sqlserver实现oracle的sequence方法
2024-01-21 01:53:47
闲谈CSS3动画
2010-05-07 12:34:00
![](https://img.aspxhome.com/file/UploadPic/20105/7/t1ztvzxxhdxxxxxxxx-226-58-35s.png)
Python操作Excel插入删除行的方法
2023-08-05 21:13:50
python使用matplotlib画柱状图、散点图
2023-05-18 11:50:06
![](https://img.aspxhome.com/file/2023/7/123797_0s.png)
python面向对象 反射原理解析
2021-05-14 08:56:32
python二叉树遍历的实现方法
2021-09-19 03:53:14
Ubuntu Server下MySql数据库备份脚本代码
2024-01-16 09:31:39
Python对于json数据键值对遍历
2023-02-21 06:01:08
JavaScript让Textarea支持tab按键的方法
2024-05-05 09:15:00
简单聊聊Python中的鸭子类型和猴子补丁
2022-06-17 00:32:58
通过两种方式增加从库——不停止mysql服务
2024-01-17 17:44:28
用CSS3和HTML5五步打造便签效果
2012-04-25 20:47:51
Python参数传递机制传值和传引用原理详解
2023-07-28 11:16:02
![](https://img.aspxhome.com/file/2023/6/61466_0s.png)
Python实现随机漫步功能
2021-02-05 20:44:45
![](https://img.aspxhome.com/file/2023/3/117603_0s.png)