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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
js常见遍历操作小结
Jun 06 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
js实现tab栏切换效果
Aug 02 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
十天学会php之第九天
2006/10/09 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python中的全局变量如何理解
2020/06/04 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
python3中布局背景颜色代码分析
2020/12/01 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
详解Python requests模块
2021/06/21 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android