VPF::input[type=file] в webkit - Форум программистов

turing

Дата 4.2.2011, 11:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 5.11.2008

Репутация: нет
Всего: нет

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

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

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

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

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

Код


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

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

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

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

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

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

mcTep

Дата 4.2.2011, 19:56 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Вот такая батва получилась 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>

Это сообщение отредактировал(а) mcTep - 4.2.2011, 19:56

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »