VPF::Стиль полей <input type="file"/> и <select/>

agx

Дата 19.10.2005, 10:14 (ссылка)

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

Загрузка ...

Новичок

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

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

Доброго времени суток.
Вопрос в следующем: мне нужно задать стиль поля ввода файла (<input type="file"/>) и выпадающего списка (<select/>). Я пробую работать с ними также, как и с <input type="text"/>, задавая стили width, border и прочие. В IE для поля ввода файла такой метод срабатывает. Но в мозилле оно выводится весьма коряво. Для выпадающего списка задается ширина (width), но не задается граница (border).
Есть ли какой-то способ применить такие стили, как width и border, к этим элементам управления? Может, в CSS для их "стилизации" есть какие-то специальные средства?

DEER

Дата 19.10.2005, 11:24 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

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

Вот что Sardar сказал когда то мне

Цитата

ИЕ работает в режиме совместимости(Quirksmode, впрочем как и все остальные) если нет на странице DOCTYPE. На деле это значит что ширина и высота включает в себя padding'и. Поставь в начале страницы такую вещь:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

--------------------

agx

Дата 19.10.2005, 14:31 (ссылка)

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

Загрузка ...

Новичок

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

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

DEER
Поставил, но ничего не изменилось... В смысле, поле ввода файла все равно продолжает отображаться не так, как было задумано. В мозилле кнопка "обзор" находится где-то посередине поля, а правая его часть не доходит до указанной ширины.
Вообще, правильно ли css-ом стилизовать элементы управления форм? Может, для этого есть какой-то особенный способ? Может, нужно использовать JavaScript для задания их свойств, или еще что-то...?

DEER

Дата 19.10.2005, 15:22 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

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

Цитата(agx @ 19.10.2005, 14:31)

Может, нужно использовать JavaScript для задания их свойств

получиться тоже самое

а выложи кусок кода, так проще разбираться

--------------------

eee

Дата 17.4.2008, 11:47 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 66
Регистрация: 14.4.2008
Где: ХарьковCity

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

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

Код


<!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">
<head>
    <title>Test</title>
    <link rel="stylesheet" href="sheets.css" type="text/css" />
</head>
<body>
<form method="post">
    <input type="file" name="image" id="image_upload">
    <p>
    <select name="image_type" id="image_type">
        <option value="" selected>- Change -
        <option value="gif">.GIF
        <option value="jpg">.JPG
        <option value="png">.PNG
    </select>
    </p>
</form>
</body>
</html>

а вот собственно и содержимое sheets.css:

Код


#image_upload{
    width: 400px;
    border: 1px solid #000000;
}
#image_type{
    width: 400px;
    border: 1px solid #000000;
}

вот они мои вопросы:
1) как сделать чтобы у поля file граница была все-таки однопиксельная, а не такая как тут выходит
2) можно ли и как поменять стиль кнопки "Обзор..." у поля file
3) как все-таки добиться изменения высоты/шрины поля file. Свойство width - не пашет, но пашет атрибут size
4) можно ли изменить стиль кнопки раскрытия селектов?
5) можно ли изменять горизонтальное выравнивание, полей селектов?

вот скрин, того что получилось с вышеуказанным кодом (вот вам 400px smile

)

Присоединённый файл ( Кол-во скачиваний: 24 )

screen.gif 4,82 Kb

bars80080

Дата 17.4.2008, 12:19 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

прикольно, очередная подлянка от фаерфокса. ИЕ6 и опера отображают нормально и кнопка тоже меняется

со стилями селекта бороться в ИЕ бесполезно, многого не выбьешь, единственная нормальная альтернатива - рисовать свой на скрытом слое

eee

Дата 17.4.2008, 23:39 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 66
Регистрация: 14.4.2008
Где: ХарьковCity

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

печально, но может кто знает какие-нибудь иные способы борьбы с этой проблемой?

demous

Дата 25.4.2008, 14:28 (ссылка)

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

Загрузка ...

Новичок

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

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

для select попробуй следущее:

Код


<style>
    select {BORDER-RIGHT: #7f9db9 1px solid;BORDER-TOP: #7f9db9 1px solid;BORDER-LEFT: #7f9db9 1px solid;BORDER-BOTTOM: #7f9db9 1px solid;overflow: auto;margin: -2px;padding: 2px;}
    .outer {border: 1px solid #7f9db9; width:1px;}
</style>

<div class="outer" style="display: inline">
      <select style="width: 60px;">
            <option>тест</option>
      </select>
</div>

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