给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. C#之用XmlWriter保存XML数据

    http://book.51cto.com/art/201012/241202.htm https://blog.csdn.net/hongkaihua1987/article/details/790 ...

  2. Linux系统CPU频率调整工具使用

    现在的CPU耗电很大,按需调节CPU频率对普通桌面及移动设备节能有重要的意义,目前多数Linux发行版都已经默认启用了这个功能,但在一些像数据库,集群系统等特别需要CPU高性能的服务器环境中,Linu ...

  3. js操作cookie的一些注意项

     这两天做购物车逻辑.依照通常的做法,把预购信息存放在cookie里,结果发生了非常多不可理喻的事情,完整的证明了我对cookie的无知. . . 这么多年.非常少用cookie,由于认为它不安全 ...

  4. # mysqlbinlog mysql-bin.000004 mysqlbinlog: unknown variable 'default-character-set=utf8'

    # mysqlbinlog mysql-bin.000004 mysqlbinlog: unknown variable 'default-character-set=utf8' 加上--no-def ...

  5. 04、Quick Start for Windows

    创建一个新工程 1.在 VS 上,选择 File > New > Project.. 2.在新工程窗口,选择  Visual C# > Windows Store > Blan ...

  6. ADO.NET数据库应用开发_ExtendedProperties属性

    7.5.5 ExtendedProperties属性 ExtendedProperties属性用来获取存储自定义属性的集合.可以在该属性中增加附加的存储信息.它的扩展属性必须是字符串类型.当以XML的 ...

  7. Thinkphp3.2 PHPMailer 发送 QQ邮箱 163邮箱

    在进入正题这前先看下网易(163)邮箱的服务器地址和端口号 类型 服务器名称 服务器地址 SSL协议端口号 非SSL协议端口号 收件服务器 POP pop.163.com 995 110 收件服务器 ...

  8. spark 系列文章汇总

    源码导读 spark 源码导读1 从spark启动脚本开始 spark 源码导读2 进一步窥探Master.Worker启动及通信机制 spark 源码导读3 进一步理解脚本调用关系 spark 源码 ...

  9. android 编译模块

    android 编译模块 在写完.c文件之后,需要加载到android上进行测试.使用arm-linux-gcc编译,并添加到android开发板上运行失败. 由于android与linux不同,需要 ...

  10. adb shell error: more than one device and emulator

    adb shell error: more than one device and emulator 本文转载出处: http://blog.sina.com.cn/s/blog_7ffb8dd501 ...