Make a custom upload button style code in html

This article mainly introduces the input beautification of type=file and the custom upload button style code. Friends who need it can refer to

The upload button made with the attributes of the input itself can be used in different browsers. They all look different. As shown in the figure below:

#But the style set for the input can only be added to the input box and has no effect on the upload button at all. Then there is a super simple method, which is to first use a p to make the upload button style you want, set the actual upload button input to be transparent, and position it above the p that sets the style.

Example:

html part:

<p >
<p >点击上传</p>
<input type="file" >
</p>

css part:

<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>

This is the effect:

Students who need to learn html please pay attention to php Chinese websitehtml video tutorial, many html online video tutorials are free Watch!

The above is the detailed content of Make a custom upload button style code in html. For more information, please follow other related articles on the PHP Chinese website!