ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS アルファ フィルターを使用して入力ファイル スタイル美化コードを実装する_エクスペリエンス交換
CSS アルファ フィルターを使用して入力ファイル スタイル美化コードを実装する_エクスペリエンス交換
- PHP中文网オリジナル
- 2016-05-16 12:06:341733ブラウズ
css アルファ フィルターを使用して入力ファイル スタイルの美化コードを実装する_エクスペリエンス交換
web 上にファイルをアップロードする場合は、アップロード ボックスを使用する必要があります。
p >
<input type="file" id="f" name="f">
次のように f の onclick ハンドルをオブジェクトに割り当てた場合でも、
<input type="file" id="f" name="f">
「クリック」すると、ファイル選択ダイアログ ボックスもポップアップ表示されます。残念なことに、まだファイルをアップロードすることはできません。 どうやってするの？この段落を見てください。
<body onmousemove="f.style.pixelleft=event.x-200;f.style.pixeltop=event.y-10;"> <input type="text"><input type="button" onmousemove=""> <input type="file" id="f" name="f" style="position:absolute;"> </body>
マウスをクリックして効果を確認しますか?上記のアイデアに基づいて、ボタンの下に置くだけで完了です。 ！
<style>
input{border:1px solid green;}
</style>
<body>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="txt" name="txt">
<input type="button" onmousemove="f.style.pixelleft=event.x-60;f.style.pixeltop=this.offsettop;"
value="请选择文件" size="30">
<input type="file" id="f" name="f" style="position:absolute;" size="1" onchange="txt.value=this.value">
<input type="submit">
</form>
</body>真のシミュレーション効果を実現するには、f を非表示にし、不透明アルファ フィルターを追加し、hidefocus 属性を追加する必要があります。点線を非表示にします。 f:
<style>
input{border:1px solid green;}
</style>
<BODY>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="txt" name="txt">
<input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;"
value="请选择文件" size="30" onclick="f.click()">
<input type="file" id="f" onchange="txt.value=this.value" name="f"
style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus>
<INPUT TYPE="submit">
</form>
</BODY>opacity=0 をわずかに大きく変更した効果がわかります。
ok、これでスタイルと位置を制御できるようになりました。 。 。
上記は、css アルファ フィルターを使用して入力ファイルのスタイル美化コード_エクスペリエンス交換を実現する内容ですが、その他の関連コンテンツについては、php 中国語 web サイト (www.php.cn) に注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。