Bootstrap中关于input里file的样式更改
给input里file类型加button样式
1.在Bootstrap中input里的file类型样式很不美观,一个按钮加一段文字,还会随浏览器的不同呈现不同的样式,所以开发的时候可以将file的样式
修改成button的样式,可以设置为默认的,白色背景,也可以设置为绿色、红色、蓝色等--------即button的几种状态
方法是:
1.写一个label ,类设置为 btn btn-(default/success/warning/Primary/info/danger/link) 设置 for=file
2.写一个input 类型是file,设置id也为file,源代码如下
btn btn-default">更换头像</label>
这是input file 的默认样式
调用button default的样式,生成一个白色按钮,在按钮里面写上提示
具体需要什么样式或者颜色可以根据button的颜色来设定
Bootstrap中关于input里file的样式更改的更多相关文章
- 自定义input[type="file"]的样式
input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...
- webView中支持input的file的选择和alert弹出
alert()弹出 input的file现选择(特别说明:不同的android版本弹出的样式不同,选择文件后自动上传) webView.setWebChromeClient(new WebChrome ...
- html中,文件上传时使用的<input type="file">的样式自定义
Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...
- html中input type=file 改变样式
<style> #uploadImg{ font-size:12px; overflow:hidden; position:absolute} #file{ position:absolu ...
- angularjs中使用 <input type="file">标签实现一次最多上传5张图片
前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...
- input[type="file"]的样式以及文件名的显示
如何美化input[type="file"] 基本思路是: (1)首先在 input 外层套一个 div : (2)将 div 和 input 设置为一样大小(width和heig ...
- javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕
1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...
- html input[type=file] css样式美化【转藏】
相信做前端的都知道了,input[type=file]和其他输入标签不一样,它的事件必须是在触发自身元素上,而不能是其他元素.所以不能简单的把input隐藏,放个button上去. <a hre ...
- input[type='file']默认样式
<input type="file" name="" id="" value="" /> 当input的ty ...
随机推荐
- JavaScript 中 this 的用法
在 JavaScript 中,this 是动态绑定,或称为运行期绑定的.一般而言,在Javascript中,this 指向函数执行时的当前对象. 由于其运行期绑定的特性,JavaScript 中的 t ...
- Oracle 11g客户端中文乱码问题
问题现象: 客户端安装完毕后,访问表内容,发现中文显示的都是?? 解决方案: 1.修改客户端注册表,路径为HKEY_LOCAL_MACHINE --->SOFTWARE ---> ORAC ...
- 每日英语:Rethinking How We Watch TV
To understand how much television could soon change, it helps to visit an Intel Corp. division here ...
- Linux之目录的操作(创建、移动、改名、删除、复制)
.创建 mkdir [dirname] //创建单个目录 mkdir -p newdir1/newdir2/newdir3 //递归创建多级目录 mkdir dir1/dir2/newdir3 //在 ...
- 基于HTML5 Canvas 实现的 Loading 效果
Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...
- 使用tcpdump观察IPV4头部结构
sudo tcpdump -nt -i lo #抓取本地回路上的数据包 先运行上面的命令,然后再另一个终端运行下图所示的命令: [root@linux 5]# sudo tcpdump -nt -i ...
- HTML5中的拖放
关于HTML5中的拖放 拖放(Drag 和 Drop)是一种常见的特性,即抓取对象以后拖到另一个位置,在 HTML5 中,拖放是标准的组成部分.在HTML5中用户可以使用鼠标选择一个可拖动元素,将元素 ...
- PHP——0126最初
数据库mydb 表格info,nation 实现效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- 回车替换Tab 并不会 提交表单 IE Chrome 通过
网上一堆可以回车替换tab的代码,可是基本都忽略谷歌浏览器的兼容性,找了3个小时 试了无数遍,终于总结出这一段代码,希望能帮到需要的同学,也给自己留个备忘 document.onkeyd ...
- 容斥 + 组合数学 ---Codeforces Round #317 A. Lengthening Sticks
Lengthening Sticks Problem's Link: http://codeforces.com/contest/571/problem/A Mean: 给出a,b,c,l,要求a+x ...