给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. [转]如何为图片添加热点链接?(map + area)

    原文地址:https://www.cnblogs.com/jf-67/p/8135004.html 所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能 ...

  2. Windows API中的坑

    本文主页链接:Windows API中的坑 ExpandEnvironmentStrings 风险: 进程会继承其父进程的环境变量.在展开如%APPDATA%等文件夹时,有可能父进程对此环境变量进行过 ...

  3. 李洪强iOS开发之Block和协议

    李洪强iOS开发之Block和协议 OC语言BLOCK和协议 一.BOLCK (一)简介 BLOCK是什么?苹果推荐的类型,效率高,在运行中保存代码.用来封装和保存代码,有点像函数,BLOCK可以在任 ...

  4. Windows Phone 性能优化(二)

    这篇文章的 demo 是在 (一)的基础上进行的调整,逻辑基本相似.本文只列和 上一篇出不同的代码. 为了实现自定义的虚拟化,把上一篇文章的 ListBox 换成 ScrollViewer + Ite ...

  5. 删除outlook配置信息

    1.输入“Win+R”组合键,在弹出的窗口中输入:control,打开控制面板 2.找到“邮件”选项,并单击 3.在弹出的窗口中,单击“显示配置文件”选项,删除配置文件夹,OK.

  6. c#开源项目[转]

    一.AOP框架 Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了把方面(aspects)部署到运行时代码,而其它AOP框架依赖配置文件的方式.这种部署方面(as ...

  7. Adroid—— DVM

     Android DVM   Android 运行环境主要指的虚拟机技术——Dalvik.Android中的所有Java程序都是运行在Dalvik VM上的.Android上的每个程序都有自己的线程, ...

  8. 个别图片IE中无法显示问题

    今天有人保障,某些图片在IE下无法打开,但是其他浏览器均没有问题.以前还真没遇到过这类问题,从上至下查看了一遍,能排除的因素基本都排除了,还是不知道为什么不能显示,真是奇怪了.最后注意到无法显示的图片 ...

  9. nginx的 keepalive_timeout参数是一个请求完成之后还要保持连

    keepalive_timeout参数是一个请求完成之后还要保持连接多久,不是请求时间多久,目的是保持长连接,减少创建连接过程给系统带来的性能损耗,类似于线程池,数据库连接池. [root@web01 ...

  10. 抹掉Scala的糖衣(14) -- Update Method

    欢迎关注我的新博客地址:http://cuipengfei.me/ 在Scala中,名字叫做update的方法是有特殊作用的. 比如: 1 2 3 val scores = new scala.col ...