Стилизиране на Input

[bobsona1]

Здравейте, имам следната форма

<form enctype="multipart/form-data" action="upload.php" method="POST" id="shortenerForm"><div class="fileinputs"> <input name="uploaded" id="urlField" type="file" value="Избери файл" /><br />  <div class="fakefile"> <input style="background-position: 0px 0px;" type="submit" id="submitButton" value="" /> </form> 
            </form>

Попринцип

<input name="uploaded" id="urlField" type="file" value="Избери файл" />

си е форма за качване на файлове, аз искам формата да няма никакви граници, тоест да е невидима, другото нещо което е, след формата вдясно излиза един бутон "Разглеждане..." искам него да го няма, а вместо него, като цъкна в невидимото поле, да излиза прозорец, в който потребителя избира файл от компютъра, който иска да качи.
Пробвах с

<style type="text/css">
div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.fakefile input { border: 0 }
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>

но нещо не става , всичко се размества
Надявам се, че ме разбрахте.
Всичко, което написах е объркано структоирано, но днес съм много изморен и нещо не съм на себе си
:!: :!:

 

[fenixpz]

Здравей!
Не съм сигурен дали те разбрах добре, но мисля че ти трябва това: http://www.quirksmode.org/dom/inputfile.html
Редактирам си мнението за да те улесня:
html:

<form>
        <input type="file" id="file" />
        <input type="text" id="textF" />
        <div id="fake">Button</div>
     </form>

css:

form {
            position: relative;
        }
        #file {
            position: relative;
            z-index: 2;
            opacity: 0;
            filter:alpha(opacity=0);
        }
        #textF {
            position: absolute;
            top: 1px;
            left: 0;
        }
        #fake {
           background: #555;
           width: 80px;
           height: 23px;
           text-align: center;
           line-height: 20px;
           position: absolute;
           top: 1px;
           left: 144px;
        }

 

[bobsona1]

Нещо май не си ме разбрал :?
Искам полето да е невидимо, а бутона "Разглеждане..." да го няма, вместо него, като цъкна в невидимото поле да върши работа като цъкване върху бутона "Разглеждане..."

 

[bobsona1]

Никой ли не може да помогне ?

 

[shterev]

мн лесно става, ако направиш една картинка и я зададеш като фон на див да речем, след това в тоя див слагаш и тоя бутон type="file" на него му задаваш прозрачност 0 и так се вижда картинката.Това е най-простото и само с ЦСС

 

[bobsona1]

Дай пример с CSS че не ти разбрах идеята

 

[shterev]

<div class="some"><input type="file" /></div>

.some{
 width:200px;
 height:20px;
 background: url(karinka-za-upload.png) no-repeat;
}

.some input{
 opacity:0;
}

 

[Mapu0]

Другия вариант е с като си направиш javascript да ти самата форма и щ стане по лесно , но понякога това си зависи и от версията на браузъра

 

[bobsona1]

Начина на @shterev помогна, не съм сигурен дали няма да имам проблеми, като довърша работата си след малко ще дам точка