ファイルアップロードボタンのユーザー定義スタイルの実装
一般的にWEB開発プロジェクトを行う際にファイルのアップロードに遭遇することは少なくありませんが、各ブラウザは
ラベルのサポートが異なるので、ブラウザの下での表示も異なります.ユーザー体験に困るかもしれませんが、今日はファイルアップロードボタンのユーザーカスタムスタイルの実装についてご紹介します.
実現原理:
2つのレイヤを作成します.1つのレイヤパッケージ以下はファイルボタンレイヤと略称し、1つのレイヤパッケージはファイルボタンをアップロードするカスタムスタイル、以下はグラデーションスタイルレイヤです.2つのレイヤのサイズが一致するように設定し、ファイルボタンレイヤを相対位置決めposition=relative、z-index=2に設定し、スタイルレイヤを絶対位置決め設定position=absolute、z-index=1に設定し、top leftプロパティをファイルボタンレイヤとオーバーラップさせるように設定します.これにより、同じサイズの2つのレイヤが重なり、ファイルボタンレイヤが上になります.次に、ファイルボタンレイヤを完全に透明に設定すると、ユーザー定義スタイルが実現します.
次に実装コードを示します.以下のコードはブラウザに直接ドラッグして効果を表示することができます.chromeブラウザを使用することをお勧めします.IEブラウザはCSSスタイルのサポートが不十分で、グラデーション効果を表示できません.
コード:
ラベルのサポートが異なるので、ブラウザの下での表示も異なります.ユーザー体験に困るかもしれませんが、今日はファイルアップロードボタンのユーザーカスタムスタイルの実装についてご紹介します.
実現原理:
2つのレイヤを作成します.1つのレイヤパッケージ以下はファイルボタンレイヤと略称し、1つのレイヤパッケージはファイルボタンをアップロードするカスタムスタイル、以下はグラデーションスタイルレイヤです.2つのレイヤのサイズが一致するように設定し、ファイルボタンレイヤを相対位置決めposition=relative、z-index=2に設定し、スタイルレイヤを絶対位置決め設定position=absolute、z-index=1に設定し、top leftプロパティをファイルボタンレイヤとオーバーラップさせるように設定します.これにより、同じサイズの2つのレイヤが重なり、ファイルボタンレイヤが上になります.次に、ファイルボタンレイヤを完全に透明に設定すると、ユーザー定義スタイルが実現します.
次に実装コードを示します.以下のコードはブラウザに直接ドラッグして効果を表示することができます.chromeブラウザを使用することをお勧めします.IEブラウザはCSSスタイルのサポートが不十分で、グラデーション効果を表示できません.
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>hidetypebutton.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- type = "file" input -->
<style type="text/css">
.user-file-outwrap{width: 100px;height: 30px;overflow: hidden;position: relative;border: 1px solid gainsboro;border: 1px solid rgba(0,0,0,0.1) !important;}
.user-file-wrap{width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 2;overflow: hidden;}
.user-file-wrap input{margin: 0 0 0 -2px;padding: 0;width: 100%;height: 100%;opacity: 0;filter: alpha(opacity=0);cursor: pointer;}
.user-file-bg{
width: 100%;height: 100%;position: absolute;top: -1px;left: -1px;z-index: 1;text-align: center;font-size: 12px;line-height: 30px;
background-color: transparent;
background-image: -moz-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
background-image: -o-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .85)),to(rgba(247, 247, 247, .85)));
background-image: -webkit-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
background-image: linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
border: 1px solid gainsboro;border: 1px solid rgba(0,0,0,0.1) !important;
color: #444;
}
</style>
</head>
<body>
<div class="user-file-outwrap">
<div class="user-file-wrap"><input type="file" class="file"></div>
<div class="user-file-bg"> </div>
</div>
<br/>
<div><strong> IE </strong></div>
</body>
<input type="file">
</html>