怎样用纯HTML和CSS更改默认的上传文件按钮样式_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:47:27
Original
1533 Leute haben es durchsucht

 如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦。看看下面的不同浏览器的截图。很明显的,他们长得很不一样。

  我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览器里的样子和布局是一样的上传文件按钮。我们可以这样: 

  步骤1.创建一个简单的HTML标记 

1

2

3

4

     Upload span >

    

div >

  第2步:CSS: 有点棘手了

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

.fileUpload {

     position : relative ;

     overflow : hidden ;

     margin : 10px ;

}

 

.fileUpload input.upload {  position : absolute ;

     top : 0 ;

     right : 0 ;

     margin : 0 ;

     padding : 0 ;

     font-size : 20px ;

     cursor : pointer ;

     opacity: 0 ;

     filter: alpha(opacity= 0 );

}

  为简单起见,我使用应用了BootstrapCSS样式的按钮  (div.file-upload)。 

  演示: 

  上传按钮,显示选中的文件 

  不幸的是纯CSS的做不到这一点。但是,如果你真的想显示所选文件,下面的JavaScript代码片段可以帮助你。 

  JavaScript: 

1

2

3

document.getElementById( "uploadBtn" ).onchange = function () {

     document.getElementById( "uploadFile" ).value = this .value;

};

  DOM:

1

2

3

4

5

     Upload span >

    

div >

  演示:

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!