フォームファイル選択ボックスのスタイルをカスタマイズする例

コードをコピー

コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
<title>フォームファイル選択ボックススタイル</title>
<style type="text/css">本文{font-family:Arial,Verdana,sans-serif; margin:100px;}</style>
<スタイルタイプ="text/css">
.アップローダー{
位置:相対;
表示:インラインブロック;
オーバーフロー:非表示;
カーソル:デフォルト;
パディング:0;
マージン:10px 0px;
-moz-box-shadow:0px 0px 5px #ddd;
-webkit-box-shadow:0px 0px 5px #ddd;
ボックスシャドウ:0px 0px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
境界線の半径:5px;
}
。ファイル名{
フロート:左;
表示:インラインブロック;
アウトライン:0 なし;
高さ:32px;
幅:180ピクセル;
マージン:0;
パディング:8px 10px;
オーバーフロー:非表示;
カーソル:デフォルト;
境界線:1px実線;
右ボーダー:0;
フォント:9pt/100% Arial、Helvetica、sans-serif; 色:#777;
テキストシャドウ:1px 1px 0px #fff;
テキストオーバーフロー:省略記号;
空白:折り返しなし;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-radius:5px 0px 0px 5px;
境界線の半径:5px 0px 0px 5px;
背景:#f5f5f5;
背景:-moz-linear-gradient(上、#fafafa 0%、#eee 100%);
background:-webkit-gradient(linear、左上、左下、color-stop(0%、#fafafa)、color-stop(100%、#f5f5f5));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0);
境界線の色:#ccc;
-moz-box-shadow:0px 0px 1px #fff インセット;
-webkit-box-shadow:0px 0px 1px #fff インセット;
box-shadow:0px 0px 1px #fff インセット;
-moz-box-sizing:境界ボックス;
-webkit-box-sizing:border-box;
ボックスのサイズ:境界線ボックス;
}
。ボタン{
フロート:左;
高さ:32px;
表示:インラインブロック;
アウトライン:0 なし;
パディング:8px 12px;
マージン:0;
カーソル:ポインタ;
境界線:1px実線;
フォント:太字 9pt/100% Arial、Helvetica、sans-serif;
-moz-border-radius:0px 5px 5px 0px;
-webkit-border-radius:0px 5px 5px 0px;
境界線の半径:0px 5px 5px 0px;
-moz-box-shadow:0px 0px 1px #fff インセット;
-webkit-box-shadow:0px 0px 1px #fff インセット;
box-shadow:0px 0px 1px #fff インセット;
.uploader 入力[type=file]{
位置:絶対;
上:0; 右:0; 下:0;
境界線:0;
パディング:0; マージン:0;
高さ:30px;
カーソル:ポインタ;
フィルター:アルファ(不透明度=0);
-moz-不透明度:0;
-khtml-不透明度: 0;
不透明度: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;}
入力[type=text]::-webkit-focus-inner{パディング:0; ボーダー:0 なし; -webkit-box-sizing:content-box;}
/* 白色配色 ------------------------ */
.white .button{
色:#555;
テキストシャドウ:1px 1px 0px #fff;
背景:#ddd;
背景:-moz-linear-gradient(上、#eeeeee 0%、#dddddd 100%);
background:-webkit-gradient(linear、左上、左下、color-stop(0%、#eeeeee)、color-stop(100%、#dddddd));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0);
境界線の色:#ccc;
}
.white:hover .button{
背景:#eee;
背景:-moz-linear-gradient(上、#dddddd 0%、#eeeeee 100%);
background:-webkit-gradient(linear、左上、左下、color-stop(0%、#dddddd)、color-stop(100%、#eeeeee));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#eeeeee',GradientType=0);
}
/* 青色の配色 ------------------------ */
.blue .button{
色:#fff;
テキストシャドウ:1px 1px 0px #09365f;
背景:#064884;
背景:-moz-linear-gradient(上、#3b75b4 0%、#064884 100%);
背景:-webkit-gradient(線形、左上、左下、カラーストップ(0%、#3b75b4)、カラーストップ(100%、#064884));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b75b4', endColorstr='#064884',GradientType=0);
境界線の色:#09365f;
}
.blue:ホバー.ボタン{
背景:#3b75b4;
背景:-moz-linear-gradient(上、#064884 0%、#3b75b4 100%);
背景:-webkit-gradient(線形、左上、左下、カラーストップ(0%、#064884)、カラーストップ(100%、#3b75b4));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#064884', endColorstr='#3b75b4',GradientType=0);
}
/* 緑の配色 ------------------------ */
.green .button{
色:#fff;
テキストシャドウ:1px 1px 0px #6b7735;
背景:#7d8f33;
背景:-moz-linear-gradient(上、#93aa4c 0%、#7d8f33 100%);
背景:-webkit-gradient(線形、左上、左下、カラーストップ(0%、#93aa4c)、カラーストップ(100%、#7d8f33));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#93aa4c', endColorstr='#7d8f33',GradientType=0);
境界線の色:#6b7735;
}
.green:hover .button{
背景:#93aa4c;
背景:-moz-linear-gradient(上、#7d8f33 0%、#93aa4c 100%);
背景:-webkit-gradient(線形、左上、左下、カラーストップ(0%、#7d8f33)、カラーストップ(100%、#93aa4c));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d8f33', endColorstr='#93aa4c',GradientType=0);
}
/* 赤色の配色 ------------------------ */
.red .button{
色:#fff;
テキストシャドウ:1px 1px 0px #7e0238;
背景:#90013f;
背景:-moz-linear-gradient(上、#b42364 0%、#90013f 100%);
背景:-webkit-gradient(線形、左上、左下、カラーストップ(0%、#b42364)、カラーストップ(100%、#90013f));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b42364', endColorstr='#90013f',GradientType=0);
境界線の色:#7e0238;
}
.red:ホバー.ボタン{
背景:#b42364;
背景:-moz-linear-gradient(上、#90013f 0%、#b42364 100%);
背景:-webkit-gradient(線形、左上、左下、カラーストップ(0%、#90013f)、カラーストップ(100%、#b42364));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#90013f', endColorstr='#b42364',GradientType=0);
}
/* オレンジ色の配色 ------------------------ */
.オレンジ .ボタン{
色:#fff;
テキストシャドウ:1px 1px 0px #c04501;
背景:#d54d01;
背景:-moz-linear-gradient(上、#f86c1f 0%、#d54d01 100%);
背景:-webkit-gradient(線形、左上、左下、カラーストップ(0%、#f86c1f)、カラーストップ(100%、#d54d01));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f86c1f', endColorstr='#d54d01',GradientType=0);
境界線の色:#c04501;
}
.orange:ホバー.button{
背景:#f86c1f;
背景:-moz-linear-gradient(上、#d54d01 0%、#f86c1f 100%);
背景:-webkit-gradient(線形、左上、左下、カラーストップ(0%、#d54d01)、カラーストップ(100%、#f86c1f));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d54d01', endColorstr='#f86c1f',GradientType=0);
}
/* 黒の配色 ------------------------ */
.black .button{
色:#fff;
テキストシャドウ:1px 1px 0px #111111;
背景:#222222;
背景:-moz-linear-gradient(上、#444444 0%、#222222 100%);
background:-webkit-gradient(linear、左上、左下、color-stop(0%、#444444)、color-stop(100%、#222222));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222',GradientType=0);
境界線の色:#111111;
}
.black:ホバー.button{
背景:#444444;
背景:-moz-linear-gradient(上、#222222 0%、#444444 100%);
background:-webkit-gradient(linear、左上、左下、color-stop(0%、#222222)、color-stop(100%、#444444));
フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#444444',GradientType=0);
}
</スタイル>
<script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
<スクリプト言語="javascript">
$(関数(){
$("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("ファイルが選択されていません...");}
});
});
</スクリプト>
</head>
<本文>
<div class="アップローダー白">
<input type="text" class="filename" readonly="読み取り専用"/>
<input type="button" name="file" class="button" value="参照..."/>
<input type="ファイル" size="30"/>
</div>
<br/>
<div class="uploader blue">
<input type="text" class="filename" readonly="読み取り専用"/>
<input type="button" name="file" class="button" value="参照..."/>
<input type="ファイル" size="30"/>
</div>
<br/>
<div class="アップローダーグリーン">
<input type="text" class="filename" readonly="読み取り専用"/>
<input type="button" name="file" class="button" value="参照..."/>
<input type="ファイル" size="30"/>
</div>
<br/>
<div class="アップローダー赤">
<input type="text" class="filename" readonly="読み取り専用"/>
<input type="button" name="file" class="button" value="参照..."/>
<input type="ファイル" size="30"/>
</div>
<br/>
<div class="アップローダーオレンジ">
<input type="text" class="filename" readonly="読み取り専用"/>
<input type="button" name="file" class="button" value="参照..."/>
<input type="ファイル" size="30"/>
</div>
<br/>
<div class="アップローダー黒">
<input type="text" class="filename" readonly="読み取り専用"/>
<input type="button" name="file" class="button" value="参照..."/>
<input type="ファイル" size="30"/>
</div>
</本文>
</html>

<<: vue ディレクティブ v-bind の使用と注意点

>>: ユーザー中心設計