自定义input[type="file"]的样式

2

3

4

5

6

7

8

9

10

11

html:

<form action="" class="activityForm">

　　<div class="file">

    <label for="file">文件：</label>

    <div class="userdefined-file">

    　　<input type="text" name="userdefinedFile" id="userdefinedFile" value="未选择任何文件">

    　　<button type="button">上传</button>

    </div>

    <input type="file" name="file" id="file">        

　　</div>

</form>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

css:

.file {

　　position: relative;

　　height: 40px;

　　line-height: 40px;

}

.file label {

　　display: inline-block;

}

.userdefined-file {

　　position: absolute;

　　top: 0;

　　left: 60px;

　　z-index: 2;

　　width: 300px;

　　height: 40px;

　　line-height: 40px;

　　font-size: 0;  /*应对子元素为 inline-block 引起的外边距*/

}

.userdefined-file input[type="text"] {

　　display: inline-block;

　　vertical-align: middle;

　　padding-right: 14px;

　　padding-left: 14px;

　　width: 220px;

　　box-sizing: border-box;

　　border: 1px solid #ccc;

　　height: 40px;

　　line-height: 40px;

　　font-size: 14px;

　　overflow: hidden;

　　text-overflow: ellipsis;

　　white-space: nowrap;

}

.userdefined-file button {

　　display: inline-block;

　　vertical-align: middle;

　　width: 80px;

　　text-align: center;

　　height: 40px;

　　line-height: 40px;

　　font-size: 14px;

　　background-color: #f54;

　　border: none;

　　color: #fff;

　　cursor: pointer;

}

.file input[type="file"] {

　　position: absolute;

　　top: 0;

　　left: 60px;

　　z-index: 3;

　　opacity: 0;

　　width: 300px;

　　height: 40px;

　　line-height: 40px;

　　cursor: pointer;

}

2

3

4

js:

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

    document.getElementById("userdefinedFile").value = document.getElementById("file").value;

}