V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
darasion
V2EX  ›  问与答

<input type="file" /> 太丑了。怎样做它的样式?

  •  
  •   darasion · 2010-12-02 20:03:11 +08:00 · 6071 次点击
    这是一个创建于 5089 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我想要的样式是这样的:
    一个大约 宽100px 高30px 的方框按钮,点击这个按钮的任意一个位置,弹出选择文件对话框。
    并且这个中只有文字而没有背景图片。



    经过一番观察发现,
    新浪微薄、腾讯微博的图片上传是直接用<input type="file" /> 设置样式实现的。
    而网易微博则是使用一个flash。

    照着新浪和腾讯的样式设置了一下,
    发现自己做的在各个浏览器的表现不一样,经常是一个浏览器能用,换一个就点了没反应。
    更发现自己做出来的还是很丑。不知道这个应该怎样设置才行呢?这个有没有窍门?



    另:google chrome 9.0.597.0 dev 的<input type="file" />元素似乎有个bug. 就是点击【选择文件】按钮,再取消。对话框会连续出现两次。而点击【未选择文件】这个标签则不会跳两次。
    6 条回复    2018-01-03 15:51:49 +08:00
    Paranoid
        1
    Paranoid  
       2010-12-02 20:16:27 +08:00
    est
        2
    est  
       2010-12-02 20:17:24 +08:00
    F...F...Flash........
    Paranoid
        3
    Paranoid  
       2010-12-02 20:19:41 +08:00
    还有这个一个:
    http://www.converthub.com/
    darasion
        4
    darasion  
    OP
       2010-12-02 20:41:30 +08:00
    囧。感觉都太费劲了。
    disinfeqt
        5
    disinfeqt  
       2010-12-02 21:26:28 +08:00
    <input type="file" style="opacity: 0;" />
    vini123
        6
    vini123  
       2018-01-03 15:51:49 +08:00
    在 input 上边建立一个 label 标签,label 标签中定义一个 for 属性,for 属性的内容就是 input 的 id。当点击 label 标签的时候,就等于点击了 input。既然这样,只要 css 去实现 label,就 ok 了。
    比如:
    ```
    <label for="file" style="display:inline-block;width:100px; height:30px;line-height:30px;color:#fff; background-color:#666; border-radius: 5px;text-align:center;l">上传图片</label>
    <input type="file" id="file" style="position:absolute;clip:rect(0 0 0 0);">
    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   986 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 21:40 · PVG 05:40 · LAX 13:40 · JFK 16:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.