Question

I have form like this:

<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>

With CSS like this:

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

In every browser my file upload input looks different. I tried IE, FF and Opera. Why is this happening?

Firefox shows box with filename and button with 3d border,
IE shows “Browse…” button with 3d border but field with filename is ok.
Under opera everything is ok – no 3d borders.

Im using reset.css like this:

    /* 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; }

Is there any way to workaround this?

Btw – is there any way to align filename text to right side? When path is long there is no filename visible, only start of patch which is “C:\Users\Myusername\Documents” etc. I want to see filename, not path!

Answer 1

in every browser my file upload input looks different. I tried IE, FF
and Opera. Why is this happening?

Because the file upload is rendered by client machine’s operating system, not HTML.