<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style>
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
</head>
<body>
<a href="javascript:void(0);" class="file">选择文件
<input type="file">
</a>
</body>
</html>

<input type='file'/>把默认样式改成框框的更多相关文章

  1. 修改input type=file 标签默认样式的简单方法

    <html><head><title></title></head><body><form id="upload ...

  2. 改变input[type=file]的默认样式

    自定义上传按钮样式的终极解决方案--input透明法 <style> .div1{ float: left; height: 41px; background: #f5696c; widt ...

  3. 去掉input type=file的默认样式

    原样式: 解决: 加style="opacity: 0;"变成透明的 然后可以外面套个div,在div上自定义样式.

  4. 改变input type="file" 文字、样式等

    <div class="tac"> <input type="file" id="browsefile" class=&q ...

  5. 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  6. 利用CSS 修改input=radio的默认样式(改成选择框)

    html部分: <input id="item2" type="radio" name="item"> <label fo ...

  7. 清除input[type=number]的默认样式

    input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, inp ...

  8. 去除input[type=number]的默认样式

    input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, in ...

  9. 去掉input[type="number"]的默认样式

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !importa ...

随机推荐

  1. eclipse java项目中明明引入了jar包 为什么项目启动的时候不能找到jar包 项目中已经 引入了 com.branchitech.app 包 ，但时tomcat启动的时候还是报错？ java.lang.ClassNotFoundException: com.branchitech.app.startup.AppStartupContextListener java.lang.ClassN

    eclipse java项目中明明引入了jar包 为什么项目启动的时候不能找到jar包 项目中已经 引入了 com.branchitech.app 包 ,但时tomcat启动的时候还是报错?java. ...

  2. Glide加载图片到自定义的圆形ImageView中不显示

    当使用自定义的圆形ImageView时,发现使用Glide加载并设置默认初始图片时,自定义的ImageView一直显示默认图片,无法更新到加载的图片. 使用下面代码可以解决这个问题 Glide.wit ...

  3. HTML5 history新特性pushState、replaceState

    DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退. 从HTML5开始,我们可以开始操作这个历史记录堆栈. 1.Histo ...

  4. python学习道路(day11note)(协程,同步与异步的性能区别,url爬网页,select,RabbitMq)

    1.协程 #协程 又称微线程 是一种用户的轻量级线程 程序级别代码控制 就不用加机器 #不同函数 = 不同任务 A函数切到B函数没有进行cpu级别的切换,而是程序级别的切换就是协程 yelied #单 ...

  5. 给Source Insight做个外挂系列之四－－分析“Source Insight”

    外挂的目的就是将代码注入到其它进程中,所以必须要有目标进程才能完成注入,而所谓的目标进程通常是某软件的一部分或者是全部,所以要对目标程序有深入地了解.一般外挂都是针对某个应用程序开发的,其装载.运行都 ...

  6. vert.x学习（三），Web开发之Thymeleaf模板的使用

    在vert.x中使用Thymeleaf模板,需要引入vertx-web-templ-thymeleaf依赖.pom.xml文件如下 <?xml version="1.0" e ...

  7. Qt之创建桌面和开始菜单快捷方式

    将安装好的酷狗拷贝到C:\data目录中 1.创建桌面快捷方式 QFile::link("C:/data/KuGou.exe", QStandardPaths::writableL ...

  8. sql执行

    一.提高sql执行效率---in与exist . where column in (select * from table where ...) . ...where exists (select ' ...

  9. 使用crypto模块实现md5加密功能（解决中文加密前后端不一致的问题）

    正常情况下使用md5加密 var crypto = require('crypto'); var md5Sign = function (data) { var md5 = crypto.create ...

  10. Python学习【第十篇】基础之杂货铺

    字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. 百分号方式: ...