给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. Java运行Python脚本的几种方式

    由于在项目需要执行Python,找寻相关资料,总结出以下几种方式: 直接执行Python脚本代码 引用 org.python包 PythonInterpreter interpreter = new ...

  2. 使用Crypto++库的CBC模式实现加密（二）

    前面已经有一篇介绍使用Crypto++库实现的加密的文章了,但是代码中考虑的不完全,所以就重新发了个二 C++封装: #include "zyaes.h" #include < ...

  3. 从“空项目”创建MFC项目遇到的问题error C1189,error MSB8031

    在VS2013中创建了一个空项目,创建了MyApp.h, MyApp.cpp(MyApp.h使用了<afxwin.h>) build的时候报错: fatal error C1189: #e ...

  4. win7下如何显示缅文和使用缅文输入法?

    windows 7 操作系统默认不支持缅文,所以缅文在win7上不能显示,当然也没有提供缅文输入法. 一.显示缅文 windows系统下显示缅文字母只需要安装缅文字体就可以了.目前常见的缅文字体就是Z ...

  5. devicetree -- SPI

    SPI (Serial Peripheral Interface) busses SPI busses can be described with a node for the SPI master ...

  6. 介绍编译的less的几种IDE工具

    介绍编译的less的两种IDE工具 现在css预编译越来越普及了,著名的有less.sass.stylus等等等等.功能上基本上都是大同小异.这些个玩意儿主要表达的意思就是:“像编程一样的编写你的cs ...

  7. 敏捷软件开发实践-Sprint Retrospective Meeting（转）

    介绍: 在敏捷开发模式中,Sprint Retrospective Meeting 也是一个必不可少的环节,它通常发生在每个Sprint的结尾,其主要作用是对于当前的迭代周期做一个阶段性的总结,包括好 ...

  8. RAII in C++

    在C++中,如果对一个块直接分配资源,而且在释放资源之前发生异常,那么这些资源在栈展开(注1)期间将不会得到释放.例如,一个块可以通过调用new动态分配内存,如果该块因异常退出,编译器将不会删除该指针 ...

  9. 在MFC中改变控件的TAB顺序

    在MFC界面中,控件的TAB顺序如果乱了,不合理,可能会使界面出现意料之外的显示. 例如,在用Spin Control来对Edit Control内的值进行增减时,如果Edit Control.Spi ...

  10. MathType中输入不了汉字如何处理

    MathType作为一款常见的数学公式编辑器在编辑数学公式时,不仅可以输入英文字符,对中文也有很好的兼容性.但是有些用户在使用MathType编辑公式时,发现一些汉字是输入不进去的,这个时候我们就需要 ...