Example of customizing the style of the form file selection box

Example of customizing the style of the form file selection box

Copy code
The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Form file selection box style</title>
<style type="text/css">body{font-family:Arial,Verdana,sans-serif; margin:100px;}</style>
<style type="text/css">
.uploader{
position:relative;
display:inline-block;
overflow:hidden;
cursor:default;
padding:0;
margin:10px 0px;
-moz-box-shadow:0px 0px 5px #ddd;
-webkit-box-shadow:0px 0px 5px #ddd;
box-shadow:0px 0px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
. filename{
float:left;
display:inline-block;
outline:0 none;
height:32px;
width:180px;
margin:0;
padding:8px 10px;
overflow:hidden;
cursor:default;
border:1px solid;
border-right:0;
font:9pt/100% Arial, Helvetica, sans-serif; color:#777;
text-shadow:1px 1px 0px #fff;
text-overflow:ellipsis;
white-space:nowrap;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-radius:5px 0px 0px 5px;
border-radius:5px 0px 0px 5px;
background:#f5f5f5;
background:-moz-linear-gradient(top, #fafafa 0%, #eee 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#f5f5f5));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0);
border-color:#ccc;
-moz-box-shadow:0px 0px 1px #fff inset;
-webkit-box-shadow:0px 0px 1px #fff inset;
box-shadow:0px 0px 1px #fff inset;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.button{
float:left;
height:32px;
display:inline-block;
outline:0 none;
padding:8px 12px;
margin:0;
cursor:pointer;
border:1px solid;
font:bold 9pt/100% Arial, Helvetica, sans-serif;
-moz-border-radius:0px 5px 5px 0px;
-webkit-border-radius:0px 5px 5px 0px;
border-radius:0px 5px 5px 0px;
-moz-box-shadow:0px 0px 1px #fff inset;
-webkit-box-shadow:0px 0px 1px #fff inset;
box-shadow:0px 0px 1px #fff inset;
.uploader input[type=file]{
position:absolute;
top:0; right:0; bottom:0;
border:0;
padding:0; margin:0;
height:30px;
cursor:pointer;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity:0;
}
input[type=button]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;}
input[type=button]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;}
input[type=text]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;}
input[type=text]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;}
/* White Color Scheme ------------------------ */
.white .button{
color:#555;
text-shadow:1px 1px 0px #fff;
background:#ddd;
background:-moz-linear-gradient(top, #eeeeee 0%, #dddddd 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dddddd));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0);
border-color:#ccc;
}
.white:hover .button{
background:#eee;
background:-moz-linear-gradient(top, #dddddd 0%, #eeeeee 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#eeeeee));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#eeeeee',GradientType=0);
}
/* Blue Color Scheme ------------------------ */
.blue .button{
color:#fff;
text-shadow:1px 1px 0px #09365f;
background:#064884;
background:-moz-linear-gradient(top, #3b75b4 0%, #064884 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b75b4), color-stop(100%,#064884));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b75b4', endColorstr='#064884',GradientType=0);
border-color:#09365f;
}
.blue:hover .button{
background:#3b75b4;
background:-moz-linear-gradient(top, #064884 0%, #3b75b4 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#064884), color-stop(100%,#3b75b4));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#064884', endColorstr='#3b75b4',GradientType=0);
}
/* Green Color Scheme ------------------------ */
.green .button{
color:#fff;
text-shadow:1px 1px 0px #6b7735;
background:#7d8f33;
background:-moz-linear-gradient(top, #93aa4c 0%, #7d8f33 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#93aa4c), color-stop(100%,#7d8f33));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#93aa4c', endColorstr='#7d8f33',GradientType=0);
border-color:#6b7735;
}
.green:hover .button{
background:#93aa4c;
background:-moz-linear-gradient(top, #7d8f33 0%, #93aa4c 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d8f33), color-stop(100%,#93aa4c));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d8f33', endColorstr='#93aa4c',GradientType=0);
}
/* Red Color Scheme ------------------------ */
.red .button{
color:#fff;
text-shadow:1px 1px 0px #7e0238;
background:#90013f;
background:-moz-linear-gradient(top, #b42364 0%, #90013f 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b42364), color-stop(100%,#90013f));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b42364', endColorstr='#90013f',GradientType=0);
border-color:#7e0238;
}
.red:hover .button{
background:#b42364;
background:-moz-linear-gradient(top, #90013f 0%, #b42364 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#90013f), color-stop(100%,#b42364));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#90013f', endColorstr='#b42364',GradientType=0);
}
/* Orange Color Scheme ------------------------ */
.orange .button{
color:#fff;
text-shadow:1px 1px 0px #c04501;
background:#d54d01;
background:-moz-linear-gradient(top, #f86c1f 0%, #d54d01 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f86c1f), color-stop(100%,#d54d01));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f86c1f', endColorstr='#d54d01',GradientType=0);
border-color:#c04501;
}
.orange:hover .button{
background:#f86c1f;
background:-moz-linear-gradient(top, #d54d01 0%, #f86c1f 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d54d01), color-stop(100%,#f86c1f));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d54d01', endColorstr='#f86c1f',GradientType=0);
}
/* Black Color Scheme ------------------------ */
.black .button{
color:#fff;
text-shadow:1px 1px 0px #111111;
background:#222222;
background:-moz-linear-gradient(top, #444444 0%, #222222 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#222222));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222',GradientType=0);
border-color:#111111;
}
.black:hover .button{
background:#444444;
background:-moz-linear-gradient(top, #222222 0%, #444444 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#444444));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#444444',GradientType=0);
}
</style>
<script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
<script language="javascript">
$(function(){
$("input[type=file]").change(function(){$(this).parents(".uploader").find(".filename").val($(this).val());});
$("input[type=file]").each(function(){
if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("No file selected...");}
});
});
</script>
</head>
<body>
<div class="uploader white">
<input type="text" class="filename" readonly="readonly"/>
<input type="button" name="file" class="button" value="Browse..."/>
<input type="file" size="30"/>
</div>
<br/>
<div class="uploader blue">
<input type="text" class="filename" readonly="readonly"/>
<input type="button" name="file" class="button" value="Browse..."/>
<input type="file" size="30"/>
</div>
<br/>
<div class="uploader green">
<input type="text" class="filename" readonly="readonly"/>
<input type="button" name="file" class="button" value="Browse..."/>
<input type="file" size="30"/>
</div>
<br/>
<div class="uploader red">
<input type="text" class="filename" readonly="readonly"/>
<input type="button" name="file" class="button" value="Browse..."/>
<input type="file" size="30"/>
</div>
<br/>
<div class="uploader orange">
<input type="text" class="filename" readonly="readonly"/>
<input type="button" name="file" class="button" value="Browse..."/>
<input type="file" size="30"/>
</div>
<br/>
<div class="uploader black">
<input type="text" class="filename" readonly="readonly"/>
<input type="button" name="file" class="button" value="Browse..."/>
<input type="file" size="30"/>
</div>
</body>
</html>

<<:  The use of vue directive v-bind and points to note

>>:  User-centered design

Recommend

Trash-Cli: Command-line Recycle Bin Tool on Linux

I believe everyone is familiar with the trashcan,...

Installation and use tutorial of Elasticsearch tool cerebro

Cerebro is an evolution of the Elasticsearch Kopf...

Steps to install superset under win10 system

Superset is a lightweight self-service BI framewo...

Introduction to HTML link anchor tags and their role in SEO

The <a> tag is mainly used to define links ...

MySQL 8.0.16 winx64 installation and configuration method graphic tutorial under win10

This article records the specific method of insta...

Detailed explanation of the API in Vue.js that is easy to overlook

Table of contents nextTick v-model syntax sugar ....

MySQL optimization query_cache_limit parameter description

query_cache_limit query_cache_limit specifies the...

Tutorial on installing Seurat2 and Seurat3 simultaneously using the same version of R in Linux

Seurat is a heavyweight R package for single-cell...

Pure CSS3 code to implement a running clock

Operation effectCode Implementation html <div ...

HTTP Status Codes

This status code provides information about the s...

HTML table tag tutorial (19): row tag

The attributes of the <TR> tag are used to ...

MySql sharing of null function usage

Functions about null in MySql IFNULL ISNULL NULLI...

How to hide the version number in Nginx

Nginx hides version number In a production enviro...

jQuery implements simple button color change

In HTML and CSS, we want to set the color of a bu...

How to delete all contents in a directory using Ansible

Students who use Ansible know that Ansible only s...