<input type='file'> のスタイルをカスタマイズするにはどうすればよいですか? _html/css

のスタイルをカスタマイズするにはどうすればよいですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:26:42

オリジナル

778 人が閲覧しました

を使用する、写真をアップロードするためのモバイル Web ページを作成しました。モバイル Web ページには次のように表示されます:

「写真」、「写真」、「ファイル」の 3 つのカテゴリがあります。「ボタン、「写真」と「画像」だけを保持して「ファイル」を削除したいのですが、どうすればこれを実現できますか?

ディスカッションに返信 (解決策)

を非表示にします。ボタンスタイルの書き方。 js または jqeury を使用して、ファイルのクリックイベントをトリガーします。

3人で1枚の写真を使っていますか？次に、JS を使用してファイルを開いてアップロードするファイルを選択しますか?
「はい」の場合は、CSSの表示位置を変更する必要があります。ファイルを削除してください

コードがないのに、どうやって他の人に助けを求めることができますか? 。

.filebox{width:120px;overflow:hidden;position:relative;}/*让部分file不显示*/.filebox input:file{position:absolute;left:0;top:0;z-index:2;opacity:0;}/*透明，绝对定位*/.filebox span{display:block;width:60px;line-height:28px;float:left;}/*模拟按钮*/

ログイン後にコピー

<div class="filebox">    <input type="file" />    <span class="camera">拍照</span>    <span class="picture">图片</span></div>

ログイン後にコピー

スタイルに何か問題があるかもしれませんが、ほんの一例です。

3人で1枚の写真を使っていますか？次に、JS を使用してファイルを開いてアップロードするファイルを選択しますか?
「はい」の場合は、CSSの表示位置を変更する必要があります。ファイルを削除します
画像やスタイルは使用されていません。これは単にです。モバイルブラウザがそれを解析すると、次のようになります

コードはありません。どうやって他の人に助けを求めることができますか。あなた？。
Bamboo さん、私のコードは次のとおりです:

<html xmlns="http://www.w3.org/1999/xhtml"><body><form method="post" action="/" enctype="multipart/form-data">	<input type="file" name="file" size="60" id="file" /><br /><br />					<input type="submit" value="上传" class="button" /></form>	      </body></html>

ログイン後にコピー

このタグのように見えます。モバイルブラウザはこれを解析します。「ファイル」ボタンを削除したいだけです

4 階の正解: ファイルを 100% 透明にし、そのスタイルが他のモジュールによって表示されます

あなたはそうしません。コードさえ持っていないのに、どうやって他の人に助けを求めることができますか? 。
Bamboo さん、私のコードは次のとおりです:

<html xmlns="http://www.w3.org/1999/xhtml"><body><form method="post" action="/" enctype="multipart/form-data">	<input type="file" name="file" size="60" id="file" /><br /><br />					<input type="submit" value="上传" class="button" /></form>	      </body></html>

ログイン後にコピー

このタグのように見えます。モバイルブラウザはこれを解析します。「ファイル」ボタンを削除したいだけです

あなたのブラウザはとても素晴らしいです。。 android+firefox/chrome を見ても問題ありません

コードがないのに、どうやって他の人に助けを求めることができますか? 。
マスター Bamboo、これが私のコードです:

<html xmlns="http://www.w3.org/1999/xhtml"><body><form method="post" action="/" enctype="multipart/form-data">	<input type="file" name="file" size="60" id="file" /><br /><br />					<input type="submit" value="上传" class="button" /></form>	      </body></html>

ログイン後にコピー

このタグのように見えます。モバイルブラウザはそれを解析し、「ファイル」ボタンを削除したいだけです

あなたのブラウザはとても素晴らしいです。。 Android+Firefox/Chrome では問題ありません
私は Android+UC ブラウザを使用しています。 http://115.28.14.43:900/test.html にアクセスして試してみてください

<html xmlns="http://www.w3.org/1999/xhtml"><body><head><style type="text/css">.uploadimg{width:185px;overflow:hidden;position:relative;}</style></head><form method="post" action="/" enctype="multipart/form-data">    <div class="uploadimg"><input type="file" name="file" size="60" id="file" /><br /><br /></div>                   <input type="submit" value="上传" class="button" /></form>          </body></html>

ログイン後にコピー