關於修改 標籤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>