如何用css3设置去除file默认效果

html-css010

如何用css3设置去除file默认效果,第1张

这个不能去除；

file是由一个text和一个button组合成的；既然这样我们就用一个text和一个button来显示这个file的样式；

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>定义input type="file" 的样式</title>

<style type="text/css">

body{ font-size:14px}

input{ vertical-align:middle margin:0 padding:0}

.file-box{ position:relativewidth:340px}

.txt{ height:22px border:1px solid #cdcdcd width:180px}

.btn{ background-color:#FFF border:1px solid #CDCDCDheight:24px width:70px}

.file{ position:absolute top:0 right:80px height:24px filter:alpha(opacity:0)opacity: 0width:260px }

</style>

</head>

<body>

<div class="file-box">

  <form action="" method="post" enctype="multipart/form-data">

 <input type='text' name='textfield' id='textfield' class='txt' />  

 <input type='button' class='btn' value='浏览...' />

    <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />

 <input type="submit" name="submit" class="btn" value="上传" />

  </form>

</div>

</body>

</html>

在html中调用css文件步骤如下：

1、首先，下载html5开发软件Intellij IDEA，这个直接在百度搜索框中搜索即可。

2、打开软件，点击file，选择New project，在弹出的对话框中，选择static web选项中的html5，点击next，在新对话框中，输入项目名称，点击finish。

3、新建一个文件，后缀为.css。

4、在body中添加一个元素h1，写上内容标题1，在css文件中设置标题1的颜色。

5、在html文件中，利用link标签，调用写好的css文件。

6、点击run，预览写好的效果。

1、首先把html的内容传到后台，由于是Html的内容应该选择安全的验证关掉

2、绑定一个<a>标签到后面的方法（这样能够保证服务器响应你的提交动作），ajax不能实现这个功能

3、把你的样式放在一个css文件里面，这样当你去实现转换的时候你会有与页面相同的样式

4、在方法中写入如下代码就能够实现下载

Response.ContentType = "application/force-download"

Response.AddHeader("content-disposition",

"attachmentfilename=" +DateTime.Now.ToString("yyyyMMddHHmmss") + ".xls")

Response.Write("<html xmlns:x=\"urn:schemas-microsoft-com:office:excel\">")

Response.Write("<head>")

Response.Write("<META http-equiv=\"Content-Type\" content=\"text/htmlcharset=utf-8\">")

#region 样式的读取

string fileCss = Server.MapPath("~/Content/CalCSS/tableCss.css")

string cssText = string.Empty

StreamReader sr = new StreamReader(fileCss)

var line = string.Empty

while ((line = sr.ReadLine()) != null)

{

cssText += line

}

sr.Close()

Response.Write("<style>" + cssText + "</style>")

#endregion

Response.Write("<!--[if gte mso 9]><xml>")

Response.Write("<x:ExcelWorkbook>")

Response.Write("<x:ExcelWorksheets>")

Response.Write("<x:ExcelWorksheet>")

Response.Write("<x:Name>Report Data</x:Name>")

Response.Write("<x:WorksheetOptions>")

Response.Write("<x:Print>")

Response.Write("<x:ValidPrinterInfo/>")

Response.Write("</x:Print>")

Response.Write("</x:WorksheetOptions>")

Response.Write("</x:ExcelWorksheet>")

Response.Write("</x:ExcelWorksheets>")

Response.Write("</x:ExcelWorkbook>")

Response.Write("</xml>")

Response.Write("<![endif]-->")

Response.Write(strHtml1)//这里是前台页面的HTML

Response.Flush()

Response.End()

不能用Ajax调用来完成，因为Ajax不会刷新页面