`

自定义的文件上传样式～

    博客分类：
  • CSS
css file upload 
阅读更多
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>上传测试</title>
<style>
.input-file{
position: absolute;
right: 0;
top: 0;
_font-size: 100px;
_font-size: 12px;
_zoom: 1;
height: 20px;
_height: auto;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
cursor: pointer;
}

.upload-button {
/*嘘。。。这个效果是从饭否学习而来的。　我是饭否重度用户～　咩哈哈～ */
background: transparent url(http://static2.fanfou.com/img/uploadicon.png) no-repeat 0 0;
cursor: pointer;
margin: 0;
padding: 0;
text-align: center;
text-indent: -9999px;
width: 20px;
height: 20px;
position: relative;
}

</style>
</head>
<body>
<div class="upload-button">
<input title="上传图片，最大2MB" class="input-file" type="file" name="picture" id="upload-file" />
</div>
</body>
</html>

分享到：
| CSS cursor鼠标样式一览表
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css自定义文件上传按钮样式

    在网页设计中，为了提供更好的用户体验，我们常常需要对文件上传功能进行自定义，使其更加美观和符合网站的整体风格。CSS（Cascading Style Sheets）是实现这一目标的关键工具，它允许我们控制HTML元素的样式，包括...

    web自定义文件上传控件

    在Web开发中，自定义文件上传控件是一个重要的功能，它允许用户选择并上传本地文件到服务器。这个项目，作为作者的第一个作品，旨在提供一种定制化的解决方案，以满足不同的界面需求和交互体验。在此，我们将深入...

    Bootstrap自定义文件上传下载样式

    总结起来，Bootstrap自定义文件上传下载样式涉及的关键技术包括Bootstrap的样式和组件（如`.input-group`、`.input-group-addon`），HTML5的文件上传API，Font Awesome图标库，以及CSS3的`pointer-events`属性。...

    Vue-Vben-Admin - 自定义上传excel文件弹框组件

    3. **上传逻辑**：在用户确认文件无误后，组件将发起文件上传请求。通常使用 Axios 或 Fetch API 发送POST请求，携带文件数据到服务器。文件通常以FormData形式提交，因为它们可能非常大，不适合放在URL中。 4. **...

    Bootstrap 4自定义文件上传插件

    Bootstrap 4自定义文件上传插件是针对原始Bootstrap框架中的文件输入组件进行增强的一个实用工具。Bootstrap 4作为流行的前端框架，提供了丰富的UI组件和响应式设计，但其默认的文件上传控件功能较为基础，通常只...

    GeoserverREST插件（自定义文件上传）

    1. **自定义文件上传**：通过插件，用户可以上传各种类型的文件到GeoServer，例如地图样式（SLD）、工作空间配置、数据文件等，这极大地增强了GeoServer的灵活性和可配置性。 2. **REST接口集成**：插件继承了...

    文件上传+自定义上传文本框

    总之，自定义文件上传和文本框涉及前端交互设计、后端处理逻辑、安全性等多个方面，是构建用户友好且安全的Web应用的重要环节。通过不断优化，我们可以为用户提供更高效、更直观的文件上传体验。

    flex+php上传文件可自定义上传格式,上传文件限制大小

    在IT行业中，文件上传是常见的交互功能，尤其在Web应用中。`Flex`与`PHP`结合使用可以创建丰富的客户端界面并实现强大的后端处理能力。`Flex`是一种基于Adobe Flash Player运行时的开放源码框架，用于构建具有动态...

    input file选择文件之后自动上传（样式自定义美化）

    在JavaScript或jQuery中，`$.ajaxFileUpload` 是一个非官方但常用的插件，它扩展了jQuery的`$.ajax`方法，专门用于处理文件上传。使用这个插件，你可以方便地实现异步文件上传，同时处理上传进度、错误和成功回调。...

    qt 自定义实现文件选择框

    自定义文件选择框通常涉及以下步骤： 1. **创建新类**：首先，你需要创建一个新的类继承自QDialog或QWidget。这个类将作为你的自定义文件选择框的基础。例如，你可以命名为`CustomFileDialog`。 ```cpp class ...

    自定义android RadioButton样式

    总的来说，自定义Android的RadioButton样式涉及到多个方面，包括创建XML资源文件定义样式，修改布局文件应用样式，以及可能的交互效果实现。理解并掌握这些技巧，可以让你的应用界面更加独特和吸引人。

    自定义Web的上传控件

    传统的HTML `&lt;input type="file"&gt;`标签虽然能够实现文件上传的基本功能，但其样式和功能有限，不能满足现代网页设计的需求。本文将深入探讨如何自定义Web的上传控件，包括它的实现原理、设计考虑以及常见技术方案。 ...

    文件上传表单样式

    "文件上传表单样式"是优化用户体验的关键，旨在使这个过程更加美观和用户友好。在这个主题下，我们将探讨如何通过不同的设计方法提升文件上传表单的视觉效果和功能性。 首先，我们要理解基本的HTML文件上传表单结构...

    Js/Jquery 实现自定义 上传 按钮

    在提供的文件名 "filamentgroup-jQuery-Custom-File-Input-87dfca9" 中，"filamentgroup" 是一个知名的前端开发团队，他们创建了一个名为 jQuery Custom File Input 的库，用于自定义文件上传按钮的样式和交互。...

    jquery上传文件点击input上传文件样式代码

    本主题聚焦于利用jQuery来改进文件上传功能，尤其是针对`&lt;input type="file"&gt;`元素的样式和交互。在传统的HTML文件上传输入框中，用户通常会看到一个简单的文本按钮，点击后弹出文件选择对话框。然而，这样的设计...

    asp.net 自定义控件 上图文件控件

    "asp.net 自定义控件 上图文件控件"指的是一个特别的自定义控件，它用于处理文件上传操作，同时还具有进度显示和时间跟踪的功能，这为用户提供了一种高效且直观的交互体验。 在创建自定义控件时，通常涉及以下步骤...

    完美解决上传进度条和upload控件不能修改样式的问题

    "完美解决上传进度条和upload控件不能修改样式的问题"这一标题所涉及的知识点，主要聚焦于文件上传功能的优化，特别是如何提升用户体验和自定义界面风格。 上传控件是网页中常见的一种元素，用于让用户提交本地文件...

    自定义上传控件input file的样式

    在网页设计中，我们经常需要使用到`&lt;input type="file"&gt;`标签来实现文件上传功能，但默认的上传控件样式通常较为简单，不符合现代网页的美观需求。本篇将探讨如何自定义`input file`的样式，打造个性化的上传界面。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics