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 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
js格式化时间小结
Nov 03 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
javascript的push使用指南
2014/12/05 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
初学Python实用技巧两则
2014/08/29 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
python 爬取疫情数据的源码
2020/02/09 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
挂牌仪式主持词
2014/03/20 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2014年秘书工作总结
2014/11/25 职场文书
入党函调证明材料
2015/06/19 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
Golang 实现WebSockets
2022/04/24 Golang