0

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!

Kamil
  • 13,363
  • 24
  • 88
  • 183

1 Answers1

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.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • I think this is wrong answer. Im using only one OS, so browser engines are displaying this diffrent. There should be one damn rendering engine developed by W3C, not 20 developed by 20 organisations. – Kamil Feb 24 '12 at 20:07
  • 2
    The XP file element is different than the Windows 2000 one, which is different than the MAC one, which is why there are limitations on how you can style it via CSS. I agree with you, but this is the reality. This have been an ongoing limitation for many many years. – Diodeus - James MacFarlane Feb 24 '12 at 20:13
  • SEE: http://stackoverflow.com/questions/2825509/can-we-change-input-type-file-style – Diodeus - James MacFarlane Feb 24 '12 at 20:23