關於修改 標籤input file 樣式問題！
阿新 • • 發佈：2019-01-27
正常的input file 標籤長不是很好看 ！所以一般會進行修飾！
修飾方法也就是用另一個好看標籤來壓住它！看程式碼
但是！雖然這樣實現了樣式修改，還是有一點小瑕疵！那就是滑鼠在a標籤的不同位置會有兩種樣式箭頭樣式與手指樣式！正常情況下使用css{cursor:pointer;}這個屬性可以修改滑鼠的樣式 ！但是對於file標籤來說是行不通的！<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 110px; height: 34px; margin: 100px auto; position: relative; } .box a{ display: block; width: 110px; height: 34px; position: absolute; left: 0; top: 0; background: green; text-decoration: none; color: #fff; border-radius: 5px; text-align: center; line-height: 34px; } .box input{ opacity:0; } </style> </head> <body> <div class="box"> <a href="javascript:;">獲取檔案</a> <input type="file" /> </div> </body> </html>
解決方法1：使用direction: rtl;這個屬性可以指定內容書寫方向！將input標籤新增此屬性，反轉其內容，這樣整個a標籤都回變為手指形狀，並且不影響file的功能！如果不要求相容ie的話這個也可以了！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 110px; height: 34px; margin: 100px auto; position: relative; overflow: hidden; } .box a{ display: block; width: 110px; height: 34px; position: absolute; left: 0; top: 0; background: green; text-decoration: none; color: #fff; border-radius: 5px; text-align: center; line-height: 34px; } .box input{ width: 180px; height: 34px; opacity:0; direction: rtl; cursor:pointer; } </style> </head> <body> <div class="box"> <a href="javascript:;">獲取檔案</a> <input type="file" /> </div> </body> </html>
上邊的方法測試了下在IE下文字會跑偏！所以還有一個用position來解決！程式碼如下，去掉反轉input樣式，利用定位拉長input距離 使滑鼠點選距離剛好點選文字的中部！這樣就避免了iE下的怪異現象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 110px; height: 34px; margin: 100px auto; position: relative; overflow: hidden; } .box a{ display: block; width: 110px; height: 34px; position: absolute; left: 0; top: 0; background: green; text-decoration: none; color: #fff; border-radius: 5px; text-align: center; line-height: 34px; } .box input{ width: 180px; height: 34px; opacity:0; position: absolute; left: -80px; top: 0; cursor:pointer; } </style> </head> <body> <div class="box"> <a href="javascript:;">獲取檔案</a> <input type="file" /> </div> </body> </html>