ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLでカスタムアップロードボタンスタイルコードを作成する

HTMLでカスタムアップロードボタンスタイルコードを作成する

零下一度
リリース: 2017-04-22 10:04:33
オリジナル
3425 人が閲覧しました

この記事では、type=file の入力の美化とカスタムのアップロード ボタンのスタイル コードを主に紹介します。必要な方は参考にしてください。

入力自体の属性で作成されたアップロード ボタンは、ブラウザごとに異なります。以下の図に示すように:

ただし、入力に設定されたスタイルは入力ボックスにのみ追加でき、アップロード ボタンにはまったく影響しません。次に、非常に簡単な方法があります。これは、まず p を使用して必要なアップロード ボタンのスタイルを作成し、実際のアップロード ボタンの入力を透明に設定し、スタイルを設定する p の上に配置します。

例:

html 部分:


<p >
<p >点击上传</p>
<input type="file" >
</p>
ログイン後にコピー

CSS 部分:


<style>
.p1 {
position: relative;
}

.p2 {
width: 100px;
height: 36px;
background: #2178fc;
color: #fff;
text-align: center;
line-height: 36px;
}

.file_input {
width: 200px;/*因为file-input在部分浏览器中会自带一个输入框,需要双击才可以点击上传,放大后将其定位到p外面就好啦*/
height: 36px;
position: absolute;
left: -100px;
top: 0;
z-index:1;
-moz-opacity: 0;
-ms-opacity: 0;
-webkit-opacity: 0;
opacity: 0; /*css属性——opcity不透明度,取值0-1*/
filter: alpha(opacity=0); 
/*
兼容IE8及以下--filter属性是IE特有的,它还有很多其它滤镜效果,而filter: alpha(opacity=0); 
兼容IE8及以下的IE浏览器(如果你的电脑IE是8以下的版本,使用某些效果是可能会有一个允许ActiveX的提示,注意点一下就ok啦)
*/
cursor: pointer;
}
</style>
ログイン後にコピー

これが効果です:

HTML を学習する必要がある学生は、php 中国語 Web サイトに注意してください html ビデオチュートリアル では、多くの HTML オンライン ビデオ チュートリアルを無料で視聴できます。

以上がHTMLでカスタムアップロードボタンスタイルコードを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート