方式一:直接透明隐藏

	        .file_button_container,.file_button_container input {background: transparent url(./img/BT5AB.png) left top no-repeat;height: 47px;width: 263px;}

	       .file_button_container {background: transparent url(./img/BT5AB.png) left top no-repeat;}
.file_button_container input {opacity: 0;}
<div class="file_button_container"><input type="file" /></div>

方式二:覆盖隐藏 js调用

.styled-button {
background-color:#25A6E1;color:#fff;font-family:'Helvetica Neue',sans-serif;
font-size:14px; line-height:30px;border-radius:20px;-webkit-border-radius:20px;
-moz-border-radius:20px;border:0;width:120px;height:32px
}
function chooseFile() {
$("#fileInput").click();
}
<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" />
</div>
<button type="button" class="styled-button" onclick="chooseFile();">上传图片</button>

你能够点击这里获得你想要的按钮样式代码

HTML学习笔记之中的一个(input文件选择框的封装)的更多相关文章

  1. MySQL学习笔记之中的一个 MySQL入门

    本人之前接触的关系型数据库主要是oracle和sqlserver,而对于mysql知之甚少,但查阅网上资料发现,mysql与oracle非常相似,所以学起来应该不会非常费劲,在总结的时候可能很多其它的 ...

  2. jquery-mobile 学习笔记之中的一个(基础属性)

    写在前面 本文是依据w3c 学习轨迹,自己研习过程中记录下的笔记,仅仅供自己学习轨迹记录之用,不喜勿喷. 0 引入库 引入相应的文件: <link rel="stylesheet&qu ...

  3. webpy学习笔记之中的一个

    这几天在学习webpy框架,之前学过一段时间,后来各种转移框架,导致没有学透彻,都是皮毛,各种打印hello world! 汗! 如今将webpy的学习过程和思路写下来,便于复习和总结. 资料主要是w ...

  4. Yii学习笔记之中的一个(安装与基础环境的配置)

    0. 下载yii http://www.yiiframework.com/download/ 1. 訪问 basic 基础文件夹下的 web 文件夹 出现图1 的错误 :    Invalid Con ...

  5. hibernate学习笔记之中的一个(JDBC回想-ORM规范)

    JDBC回想-ORM规范 JDBC操作步骤 注冊数据库驱动 Class.forName("JDBCDriverClass") 数据库 驱动程序类 来源 Access sun.jdb ...

  6. jquery 深入学习笔记之中的一个 (事件绑定)

    [jquery 事件绑定] 1.加入元素事件绑定 (1) 加入事件为当前元素 $('p').on('click',function(){ //code here ... }); (2) 加入事件为未来 ...

  7. Java NIO 学习笔记(六)----异步文件通道 AsynchronousFileChannel

    目录: Java NIO 学习笔记(一)----概述,Channel/Buffer Java NIO 学习笔记(二)----聚集和分散,通道到通道 Java NIO 学习笔记(三)----Select ...

  8. The Pragmatic Programmer 读书笔记之中的一个 DRY-Don’t Repeat Youself

     The Pragmatic Programmer读书笔记之中的一个 DRY-Don't Repeat Youself 尽管自己买了非常多软件project方面的书,可是由于时间的问题.一直没有静 ...

  9. Spark学习笔记1——第一个Spark程序:单词数统计

    Spark学习笔记1--第一个Spark程序:单词数统计 笔记摘抄自 [美] Holden Karau 等著的<Spark快速大数据分析> 添加依赖 通过 Maven 添加 Spark-c ...

随机推荐

  1. [Unity3D]Unity3D游戏开发之《愤慨的小鸟》弹弓实现

    各位朋友,大家晚上好, 我是秦元培.欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei.今天我们来做一个高端大气上档次的东西. 我相信大家都玩过一款叫做<愤慨的 ...

  2. 【 .NET 面向对象程序设计进阶》】【 《.NET 面向对象编程基础》】【《正则表达式助手》】

    <.NET 面向对象程序设计进阶> <.NET 面向对象程序设计进阶> <正则表达式助手>

  3. 逻辑与(&&、&)和逻辑或(||、|)

    这四个逻辑运算符,大家都知道,但是有时候会凌乱,这里用程序来解释一下,以免忘了.(根据大家反应说:这文章没有解释清楚它们的区别.用法,其实文章主要说的是,如果将这四个运算符用于条件判断,那么它们会是什 ...

  4. UVA 529 Addition Chains(迭代搜索)

      Addition Chains  An addition chain for n is an integer sequence  with the following four propertie ...

  5. XML学习经验实例总结2

    DTD约束 Book.dtd: <!ELEMENT 书架 (书+)> <!ELEMENT 书 (书名,价格,介绍)> <!ELEMENT 书名 (#PCDATA)> ...

  6. Ajax - 登录

    Login.html <head> <title>登录</title> <mce:script src="js/jquery-1.5.2.js&qu ...

  7. 【ASP.NET Web API教程】4.3 ASP.NET Web API中的异常处理

    原文:[ASP.NET Web API教程]4.3 ASP.NET Web API中的异常处理 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内 ...

  8. camel-name-utils 在驼峰风格跟下划线风格之间切换

    用处 用来将字符串在驼峰风格跟下划线风格之间切换. 对于一般人可能没用.对于写orm框架的人有点作用. 样例: company_name -> companyName 安装方式 加入下面依赖到p ...

  9. 14.4.4 Configuring the Memory Allocator for InnoDB InnoDB 配置内存分配器

    14.4.4 Configuring the Memory Allocator for InnoDB InnoDB 配置内存分配器 当InnoDB 被开发, 内分配齐 提供了与操作系统和运行库往往缺乏 ...

  10. Windbg 32位版本和64位版本的选择

    习惯了Vsiual Studio的兄弟们可能会因为先入为主的原因以为所有的调试器都应该像它那样,其实不然,当你安装Debugging Tools for Windows的时候,你将发现有两个系列的工具 ...