<!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. JavaScript 函数声明，函数表达式，匿名函数，立即执行函数之区别

    函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...

  2. swif-自动引用计数

    import UIKit /* class Person { let name: String //强引用 init(name: String) { self.name = name print(&q ...

  3. AtomicBoolean运用

    AtomicBoolean运用 首先先看如下例子 private static class BarWorker implements Runnable { private static boolean ...

  4. 关于sed用法

    sed处理流程 sed的处理流程,简化后是这样的: 1.读入新的一行内容到缓存空间: 2.从指定的操作指令中取出第一条指令,判断是否匹配pattern: 3.如果不匹配,则忽略后续的编辑命令,回到第2 ...

  5. python爬虫学习-爬取某个网站上的所有图片

    最近简单地看了下python爬虫的视频.便自己尝试写了下爬虫操作,计划的是把某一个网站上的美女图全给爬下来,不过经过计算,查不多有好几百G的样子,还是算了.就首先下载一点点先看看. 本次爬虫使用的是p ...

  6. WordPress基础：自定义菜单

    需要自定义一个菜单,可以访问后台->外观->菜单

  7. EntityFramework优缺点

    高层视图: 改变在现有系统使用EntityFramework的优势是什么? • All -in-1框架的类映射表,需要编写映射代码, 并且是很难维护的. • 可维护性,易于理解的代码,无需创造大的数据 ...

  8. mongostat用法

    mongostat是mongoDB自带的工具,用于检测mongodb的运行状态. mongostat用法 Test:Test/node-131 / # mongostat --help Usage: ...

  9. linux–nohup命令（转）

    在应用Unix/Linux时,我们一般想让某个程序在后台运行,于是我们将常会用 & 在程序结尾来让程序自动运行.比如我们要运行mysql在后台: /usr/local/mysql/bin/my ...

  10. Netty NIO 框架性能压测-短链接-对比Tomcat

    压测方案 准备多个文件大小分别为 1k 10k 100k 300k 使用ab分别按 [50,2000](按50逐渐叠加)压测服务,每次请求10W次 硬件信息:CPU:Intel(R) Xeon(R) ...