Question

我有这样的形式：

<form method="POST">

<p>
    Nazwa kategorii: <br />
    <input name="NazwaKat" type="text" width="80" />
</p>

<p>Opis kategorii: <br />
    <textarea name="OpisKat" columns="80" rows="3"></textarea>
</p>

<p>Obrazek: <br />
    <input class="img" type="file" pattern="*.jpg" name="image" />
</p>

<p>
    <input type="submit" value="Zapisz"/>
</p>

</form>

使用这样的CSS：

input, textarea
{
    border: 1px solid #bbb;
    width: 100%;
}

在每个浏览器中，我的文件上传输入看起来都不同。我试过IE，FF和Opera。为什么会这样？

Firefox显示包含文件名的框和带有3d边框的按钮， IE显示带有3d边框的“浏览...”按钮，但带文件名的字段正常。在歌剧下，一切都很好 - 没有3D边框。

我正在使用reset.css：

    /* Browser style reset */

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
    { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
    body { line-height: 1.5; background: #fff; margin: 1.5em 0; }
    table { border-collapse: collapse; border-spacing: 0; }
    caption, th, td { text-align: left; font-weight:400; }
    blockquote:before, blockquote:after, q:before, q:after { content: ""; }
    blockquote, q { quotes: "" ""; }
    a img { border: none; }
    input,textarea { margin: 0; }

    /* Removes Firefox imposed outline */
    a { outline: none; }

    /* Clearing floats without extra markup  */
    .wrapper { display: inline-block; }
    .wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
    * html .wrapper { height: 1%; }
    .wrapper { display: block; }

有没有办法解决这个问题？

顺便说一下 - 有没有办法将文件名文本对齐到右侧？当路径很长时，没有文件名可见，只有补丁的开头是“C：\ Users \ Myusername \ Documents”等。我想查看文件名，而不是路径！

Answer 1

在每个浏览器中，我的文件上传输入看起来都不同。我试过IE，FF 和歌剧。为什么会这样？

因为文件上传是由客户端计算机的操作系统呈现的，而不是HTML。

CSS - 文件上传/选择按钮 - 在IE，Firefox，Opera中有所不同

1 个答案: