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

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

Форум программистов > Вёрстка веб-сайтов > Стиль полей <input type="file"/> и <select/>

Автор: agx 19.10.2005, 10:14

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

Автор: DEER 19.10.2005, 11:24

Вот что 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

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

Автор: DEER 19.10.2005, 15:22

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

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

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

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

Автор: eee 17.4.2008, 11:47

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

Код


<!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

)

Автор: bars80080 17.4.2008, 12:19

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

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

Автор: eee 17.4.2008, 23:39

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

Автор: demous 25.4.2008, 14:28

для 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>