Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > input[type=file] в webkit

Автор: turing 4.2.2011, 11:13

Известно, что контрол input с типом file не слишком подчиняется стилизации с помощью CSS. К тому же, он не реагирует на вызов метода click(), и ему нельзя программно задать значение. Надпись на кнопке тоже нельзя поменять. Короче говоря, строгий браузерный контрол.

Есть парочка решений со скрытием реального контрола и показом пользователю чего нам угодно:
http://www.quirksmode.org/dom/inputfile.html
http://the-echoplex.net/log/how-to-style-a-html-file-upload-control-using-css-and-javascript

Однако они не лишены недостатков и довольно сложны.

У меня задача попроще: сделать так, чтобы в webkit-браузерах (в хроме и сафари) кнопочка была там же, где у всех, то есть справа от поля ввода. Техзадание такое.,

Само по себе это вроде не очень сложно, используем псевдокласс для этой кнопочки:

Код


input[type="file"]{
    width: 100%;
}

input[type="file"]::-webkit-file-upload-button {
    float: right;
    width: 200px;
}

Но тут всплывает проблема. Браузер делает отступ слева в текстовом поле с именем файла. Ширина отступа равна ширине кнопки.

http://s2.ipicture.ru/

У кого есть идеи, как полечить?

Что я пробовал:

padding:0 не помогает
псевдокласса для поля с именем файла нет
-webkit-appearance:textfield не помогает

Автор: mcTep 4.2.2011, 19:56

Вот такая батва получилась smile

Можно посмеяться

Конечно надо с размерчиками поиграться, но подход понятен, я думаю.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        body {
            background-color: #ccc;
        }
        div {
            overflow:hidden;
            position:relative;
            height:30px;
            width:100%;
        }
        
        input[type="file"]{
         background-color: #fff;
         width:100%;
         position:absolute;
         height: 20px;
         left:-200px
        }
        input[type="file"]::-webkit-file-upload-button {
            position:absolute;
            
            width:200px;
            right:-200px;
        }
    </style>
</head>
<body>
<div>
<input type="file" />
</div>
</body>
</html>