html input=“file”的默认样式

html-css026

html input=“file”的默认样式,第1张

<!DOCTYPE html>

<html>

<head>

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

<title>定义html 中input file的样式</title>

<style type="text/css">

body {

font-size: 14px

}

input {

vertical-align: middle

margin: 0

padding: 0

}

.file_style {

position: relative

width: 340px

}

.text_style {

height: 22px

border: 1px solid #cdcdcd

width: 180px

}

.button_style {

background-color: #FFF

border: 1px solid #CDCDCD

height: 24px

width: 70px

}

.file_item {

position: absolute

top: 0

right: 80px

height: 24px

filter: alpha(opacity : 0)

opacity: 0

width: 260px

}

</style>

</head>

<body>

<div class="file_style">

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

<input type="text" name="textfield" id="textfield" class="text_style"/><input

type="button" class="button_style" value="浏览..." /><input type="file"

name="fileField" class="file_item" id="fileField" size="28"

onchange="document.getElementById('textfield').value=this.value" />

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

</form>

</div>

</body>

</html>

htmlfile是html格式的文件,它其实是特殊的文本文件。它需要浏览器的解释,每种HTML标记符在使用中可带有不同的属性项,用于描述该标记符说明的内容显示不同的效果。html又称超文本标记语言,结构包括头部分(Head)、和主体部分(Body),其中头部(head)提供关于网页的信息,主体(body)部分提供网页的具体内容。