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中根据字数截取字符串,不能截断url
Jan 12 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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
session 的生命周期是多长
2006/10/09 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
centos下更新Python版本的步骤
2013/02/12 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
python编写俄罗斯方块
2020/03/13 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
python 读取.nii格式图像实例
2020/07/01 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
幼儿园实习自我鉴定
2013/12/15 职场文书
企业党员一句话承诺
2014/05/30 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
长城导游词
2015/01/30 职场文书
小学科学课教学反思
2016/02/23 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
Go语言grpc和protobuf
2022/04/13 Golang