Webkit input file, hides label on transform: translateX

When using `-webkit-transform: translateX(0%)` on a parent container the file name "label" text disappears from the standard `` element in Chrome. In Safari the text is also hidden but upon file selection the icon for the file is displayed. http://jsfiddle.net/9sZxv/ Merely adding and removing a class such as: .transX { -webkit-transform: translateX(0%); }​ To the parent div in:
Will cause the text `No file chosen`, or the file name if a file is selected to disappear. Tested with- Win7: Chrome 19 and Safari 5.1 Is there a fix or workaround? The file select element isn't friendly to CSS styling and there isn't any element to reference just the text part directly so I am at a lost on how to approach this issue.
Not a solution, but interesting how it doesn't break when applied to the body tag: jsfiddle.net/9sZxv/1 seems like some inheritance issue but I can't seem to crack it.

以上就是Webkit input file, hides label on transform: translateX的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏