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

この記事では、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 サイトの他の関連記事を参照してください。