bootstrap下拉列表与输入框组结合的样式调整


Posted in Javascript onOctober 08, 2016

输入框组默认是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>

效果如下:

bootstrap下拉列表与输入框组结合的样式调整

二、将按钮嵌套的下拉菜单改为下拉列表,并调整样式:

<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>

效果如下:

bootstrap下拉列表与输入框组结合的样式调整

其中,背景图片arrow.jpg如下:

bootstrap下拉列表与输入框组结合的样式调整

这样就可实现下拉菜单选择邮箱后缀的效果

以上所述是小编给大家介绍的bootstrap下拉列表与输入框组结合的样式调整,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
js 内存释放问题
Apr 25 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 #Javascript
Javascript中常用的检测方法小结
Oct 08 #Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 #Javascript
AngularJS 2.0入门权威指南
Oct 08 #Javascript
省市区三级联动jquery实现代码
Apr 15 #Javascript
微信小程序 数据访问实例详解
Oct 08 #Javascript
Bootstrap Table的使用总结
Oct 08 #Javascript
You might like
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Python能做什么
2020/06/02 Python
PyTorch-GPU加速实例
2020/06/23 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
求职信的要素有哪些呢
2013/12/26 职场文书
中学生英语演讲稿
2014/04/26 职场文书
怒海潜将观后感
2015/06/11 职场文书
职工食堂管理制度
2015/08/06 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL
Android中View.post和Handler.post的关系
2022/06/05 Java/Android
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang