修改file按钮的默认样式实现代码

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>添加附件</title>
</head>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript">
function fclick(obj){
style.posTop=event.srcElement.offsetTop
style.posLeft=event.x-offsetWidth/2
}
$(function(){
$("#addFile").click(function(){
var br = $("<br>");
var input1 = $("<input id='inputrecievedocument' type='text'/>");
var input2 = $("<input type='button' style='margin-left:5px;background-color:blue' id='btnrecievedocument' onmouseover='fclick(t_file)' value='浏览'/>");
var input3 = $("<input name='upfile' type='file' style='position:absolute;filter:alpha(opacity=0);width:70px;' id='t_file' onchange='inputrecievedocument.value=this.value' hidefocus/>");
var button = $("<input type='button' value='删除' style='margin-left:5px;background-color:blue'/>");
$("#file").append(br).append(input1).append(input3).append(input2).append(button);
button.click(function() {
br.remove();
input1.remove();
input2.remove();
input3.remove();
button.remove();
});

});

});
</script>
<body class="body">
<form method="post" action="" enctype="multipart/form-data">
<input type="button" value="添加附件" class="btn_fujian" id="addFile" style="margin-left:20px;margin-top:2px;"/>
<div id="file"></div>
</form>
</body>
</html>

IE9中运行如下：

赞 (0)

相关推荐

  • css美化input file按钮的代码方法

    css美化input file按钮的代码方法

    input file在系统默认下的外观: 我们最多通过定义input的border来改变系统默认的外观:如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用背景图片来代替,通过css定义input flie还真是办不到的.偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透明掉的按钮.按照作者的方法,我也试验了一下,代码如下: input file的另类做法 上传文件: 浏览... [Ctrl+A 全选 注:

  • javascript类型File的Input按钮功能研究

    比如 http://www.youku.com/v1.0.0326/v/swf/up.swf 这是优酷的视频上传选择,其是通过FLASH的方法来实现了不显示非视频类文件. FLASH到这种效果一般也就是如这里所描述的 复制代码 代码如下: import flash.net.FileReferenceList; var fileRef:FileReferenceList = new FileReferenceList(); var allTypes:Array = []; var 浏览类型:Obj

  • 修改file按钮的默认样式实现代码

    修改file按钮的默认样式实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>添加附件</title&g

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    详解基于Vue cli开发修改外部组件Vant默认样式

    前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s

  • vue如何使用swiper插件修改左右箭头的默认样式

    目录 使用swiper插件修改左右箭头的默认样式 vue中修改swiper样式问题 原因 解决方法 总结 使用swiper插件修改左右箭头的默认样式 效果图 修改箭头的背景,以及颜色 .swiper-button-prev, .swiper-button-next{ color: #fff; background: #5e5f5e; } 修改箭头的大小 .swiper-button-prev:after, .swiper-button-next:after { font-size: 14px;

  • elementui的默认样式修改方法

    今天用element ui ,做了个消息提示,发现提示的位置总是在上面,如图: 可是我想让提示的位置到下面来,该怎么办? 最后还是看了官方的api 原来有个自定义样式属性 customClass 设置下就好了 js代码 css代码 效果图 以上这篇elementui的默认样式修改方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 浅谈vue中改elementUI默认样式引发的static与assets的区别 浅谈vue中改elementUI默

  • Android 修改Preferences默认样式的步骤

    Android 修改Preferences默认样式的步骤

    Android开发中难免会遇到参数配置的功能,此时可以通过普通的布局实现,不过android sdk中也为我们提供了Preferences,可以通过配置xml方式实现配置界面的效果.比如手机系统的设置应用就是使用的Preferences: 如何使用Preferences这里就不说了,你可以新建Activity选择Settings Activity模板了解它的基本使用,模板默认的界面如下: 可以看到,非常丑,这里就以修改icon和文字的间距为目标探究如何修改Preferences样式. 1,查找源

  • 快速修改antd vue单个组件的默认样式

    快速修改antd vue单个组件的默认样式

    目录 一.想要修改组件的默认样式 二.类名scoped的限制 你是否会有这样的疑惑 三.使用/deep/. >>>时 Ant Design Vue地址:https://www.antdv.com/docs/vue/introduce-cn/ 刚接触Ant Design Vue的童鞋们可能会有这样的问题,不就是修改默认的组件样式吗,为什么一会生效,一会又不生效.希望看完这个文章,会给你一些收获~ 一.想要修改组件的默认样式 首先你需要知道组件是渲染在哪里的 这个组件是渲染在当前页面内部,还

  • Vue修改mint-ui默认样式的方法

    在使用vue框架开发时,饿了么的mint-ui框架是个不错的选择,但是有时候我们需要修改它的默认样式,方法如下: 1.在src/assets/css目录下新建scss文件,my-mint.scss,内容如下: /* 覆盖mint-ui的primary颜色,改为自己UI的主题色 */ $color-primary: #05AFAF; .mint-header { background-color: $color-primary; } .mint-button:not(.is-disabled):a

  • ElementUI 修改默认样式的几种办法(小结)

    ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持.该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于 react 和 vue 框架介绍几种修改 ElementUI 默认样式的办法. ElementUI下载官网:http://element.eleme.io/#/zh-CN Vue 安装: npm i element-ui -S 使用: import Vue from 'vue'; import ElementUI

  • vue如何使用vant组件的field组件disabled修改默认样式

    vue如何使用vant组件的field组件disabled修改默认样式

    目录 使用vant组件的field组件disabled修改默认样式 vue+vant修改样式 1.当<style>没有scoped时 2.有scoped时 使用vant组件的field组件disabled修改默认样式 由于vue开发时会在style加上scoped避免全局污染,所以正常开发时直接修改外部组件(vant)的样式时会不生效,我们把scoped删除后会发现样式是可以生效的. 但是scoped是肯定不能不要的. 所以我们可以用 /deep/(深度)来修改样式 举例 —— 修改vant

随机推荐