给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,源代码如下

<divclass="form-group">
<labelclass="col-sm-2 control-label"><imgsrc="index.png"alt=""></label>
<divclass="col-sm-2 ">
<labelfor="file"class="
btn btn-default">更换头像</label>
<inputid="file"type="file"style="display:none">
</div>
</div>

这是input file 的默认样式

调用button  default的样式,生成一个白色按钮,在按钮里面写上提示

具体需要什么样式或者颜色可以根据button的颜色来设定

Bootstrap中关于input里file的样式更改的更多相关文章

  1. 自定义input[type="file"]的样式

    input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...

  2. webView中支持input的file的选择和alert弹出

    alert()弹出 input的file现选择(特别说明:不同的android版本弹出的样式不同,选择文件后自动上传) webView.setWebChromeClient(new WebChrome ...

  3. html中,文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  4. html中input type=file 改变样式

    <style> #uploadImg{ font-size:12px; overflow:hidden; position:absolute} #file{ position:absolu ...

  5. angularjs中使用 <input type="file">标签实现一次最多上传5张图片

    前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...

  6. input[type="file"]的样式以及文件名的显示

    如何美化input[type="file"] 基本思路是: (1)首先在 input 外层套一个 div : (2)将 div 和 input 设置为一样大小(width和heig ...

  7. javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕

    1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...

  8. html input[type=file] css样式美化【转藏】

    相信做前端的都知道了,input[type=file]和其他输入标签不一样,它的事件必须是在触发自身元素上,而不能是其他元素.所以不能简单的把input隐藏,放个button上去. <a hre ...

  9. input[type='file']默认样式

    <input type="file" name="" id="" value="" /> 当input的ty ...

随机推荐

  1. HTML中css和js链接中的版本号

    背景 在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候, 浏览器 ...

  2. vim-程序员的利器

    个人觉得vi使用熟练后就离不开了,用了它效率会提升不少,但是没了它可能还赶不上以前的速度,给惯坏了. 以下是本人无耻的复制和粘贴的:(附图一张方便学习) Vim目前已经有各主流系统的版本,尽管vim较 ...

  3. sqlzoo练习答案--SUM and COUNT

    World Country Profile: Aggregate functions This tutorial is about aggregate functions such as COUNT, ...

  4. Ubuntu/Debian下编译PC版的ffmpeg

    1.安装git: 在命令行下执行 sudo apt-get install git-core 2.下载最新版本的ffmpeg: git clone git://source.ffmpeg.org/ff ...

  5. pyspark采用python3开发

    现在时间2017-04-17. python版本3.5支持pyspark python3.6目前还不支持 做法简单,只需要在bin/pyspark中增加 export PYSPARK_PYTHON=p ...

  6. python判断一个对象是否可迭代

    如何判断一个对象是可迭代对象? 方法是通过collections模块的Iterable类型判断: >>> from collections import Iterable >& ...

  7. C语言 · 大数加法

    算法提高 大数加法   时间限制:1.0s   内存限制:256.0MB      问题描述 输入两个正整数a,b,输出a+b的值. 输入格式 两行,第一行a,第二行b.a和b的长度均小于1000位. ...

  8. 数学 - Codeforces Round #319 (Div. 1)A. Vasya and Petya's Game

    Vasya and Petya's Game Problem's Link Mean: 给定一个n,系统随机选定了一个数x,(1<=x<=n). 你可以询问系统x是否能被y整除,系统会回答 ...

  9. scanner, BufferedReader, InputStreamReader 区别及特殊字符的输入

    1. Scanner是一个可以使用正则表达式来分析基本类型和字符串的简单文本扫描器!也就是控制台应用程序最为常用的文本输入方式!Scanner取得输入数据的依据是空格符:如按下空格键,Tab键或者En ...

  10. 【BZOJ】1072: [SCOI2007]排列perm(状压dp+特殊的技巧)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1072 首先无限膜拜题解orz表示只会暴力orz 数据那么小我竟然想不到状压! orz 这种题可以取模 ...