给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. ARM开发工具软件命令具体解释---嵌入式回归第三篇

    先从bootloader開始,由于临时眼下这些都会是裸机程序相关. 本人这里是VMwarm10.0上安装的红帽linux虚拟机.从以下的截图中能够看出 裸机开发流程: 这里先做第三步(第一步第二步已提 ...

  2. DDMS android 开发工具-----dump View Hierarchy for UI automator

    今天又发现一个好工具  dump View Hierarchy 对学习UI布局非常有优点,操作也非常easy的.直接上图说话了 watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  3. 在ubuntu下安装free pascal

    1.ubuntu16.04版本已经集成了free pascal最新的3.0版,只需要安装就可以了. sudo apt install fp-compiler 在ubuntu里面,fp-compiler ...

  4. 编写每天定时切割Nginx日志的脚本

    自动每天定时切割Nginx日志的脚本,很方便很好用,推荐给大家使用.本脚本也是参考了张宴老师的文章,再次感谢张宴老师.1.创建脚本/usr/local/nginx/sbin/cut_nginx_log ...

  5. Xamarin for VS 4.0.1.145 Stable版免费完整破解补丁

    Xamarin for VS 4.0.1.145 Stable版免费完整破解补丁 支持Priority最高权限(超企业版)开发, 支持Android, IOS调试.  支持Android打包为Bund ...

  6. CXSprite.cpp文件

    #include "XSprite.h" CXSprite::CXSprite(void) { m_strPic.clear(); } CXSprite::~CXSprite() ...

  7. 0067 MySQL的日期字段的取值用单引号

    这两天在做sql练习题http://www.cnblogs.com/zxx193/p/4000467.html的时候,涉及到下面的建表+插数据操作 CREATE TABLE t1( s_no VARC ...

  8. cocos2dx遇到的一些坑

    针对2.x 1.CCSprite无法直接用文件名更换图片,可以添加如下函数 bool CCSprite::setWithFile(const char *pszFilename) { CCAssert ...

  9. Flume Channel Selectors + kafka

    http://flume.apache.org/FlumeUserGuide.html#custom-channel-selector 官方文档上channel selectors 有两种类型: Re ...

  10. C语言 · 数的读法

    基础练习 数的读法   时间限制:1.0s   内存限制:512.0MB    问题描述 Tom教授正在给研究生讲授一门关于基因的课程,有一件事情让他颇为头疼:一条染色体上有成千上万个碱基对,它们从0 ...