ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML でファイル入力ボタンをカスタマイズし、テキストボックスを非表示にする方法
HTML でファイル入力ボタンをカスタマイズし、テキストボックスを非表示にする方法
- Patricia Arquetteオリジナル
- 2024-11-01 16:51:02928ブラウズ
スタイルの設定方法 テキストボックスを非表示にしてボタンのみを表示するには
スタイル特にテキストボックスを非表示にしてボタンのみを表示しようとする場合は、困難になる可能性があります。
CSS ソリューション
CSS を使用して目的の効果を実現するには、次のコードを検討してください。
<code class="html"><html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
/* enough width to completely overlap the real hidden file control */
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html></code>
この CSS コードは、実際のファイル入力に重ねて、不透明度を使用してテキスト ボックスを非表示にする偽のファイル ボタンを作成します。 0;.
以上がHTML でファイル入力ボタンをカスタマイズし、テキストボックスを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。