Стилизация HTML FORM элементов с отступом, ширина 100%

Question

Я оформляю форму, используя таблицу со столбцами фиксированной ширины, и я хочу, чтобы входные элементы внутри <td> заполняли контейнер. Я знаю блочную модель CSS и знаю, что элементы будут отбрасываться width: 100%, но проблема заключается в ее согласованности.

<input> элементы просачиваются, как и ожидалось, но <select> элементы не проходят. Это приводит к тому, что мои поля не выстраиваются должным образом. Я пробовал все свойства, такие как переполнение, отображение, пробелы ... это не имеет никакого значения. Что с элементом <select>? В Firebug я вижу, что они имеют одинаковые свойства блочной модели с элементом input, но они не отображают одно и то же.

Я использую тип документа HTML 5, и это происходит как в Firefox, так и в Chrome.

Прямо сейчас я исправляю это с помощью функции JS, которая выбирает все элементы с классом stretch и вычисляет и устанавливает статическую ширину, чтобы она помещалась внутри контейнера. Это идеально выстраивает элементы формы. (Я должен был исключить <select> элементы, потому что их ширина уже была в порядке ... странная причудливость.)

Есть ли чистое решение CSS для этого? Я не хотел бы запускать эту функцию каждый раз, когда обновляется часть страницы, как при вызовах AJAX ...

Answer 1

Вы можете использовать box-sizing: border-box; для текстовых полей и текстовых полей. Это решает разницу с помощью selectbox.

Answer 2

Это может помочь вам узнать следующие результаты различных исследований юзабилити.

1) Для большинства форм люди предпочитают видеть метку чуть выше элемента формы:

2) Люди считают полезным, если элементы формы имеют соответствующий размер, чтобы помочь предположить, какой объем информации ожидается.

<ul>

    <li><label for="firstname">First Name</label><br>
        <input type="text" id="firstname" name="firstname" size="15"></li>

    <li><label for="age">Age</label><br>
        <input type="text" id="age" name="age" size="3"></li>

    <!-- ... more list items -->

</ul>

Примечание: список в этом примере будет стилизован так, чтобы он не отображался в виде списка с маркером. Такое использование списков помогает обеспечить доступность, поскольку программы чтения с экрана сообщают пользователю, сколько элементов содержится в списке.

Я подумал, что это может быть полезно, так как предполагает, что ваши усилия могут быть немного напрасными, когда вы пытаетесь расположить форму в таблице и растянуть все входные данные до одинаковой длины.

http://dev.w3.org/html5/markup/input.html#input

Answer 3

Лучший способ - подделать границы элементов с помощью div.

<div class="formholder>
    <textarea></textarea>
</div>

С этим CSS:

.formholder {padding:10px;background:white;border:1px solid #ccc}
.formholder textarea {width:100%;padding:0;margin:0;background:white;border:0}

Конечно, вы можете расширить это для других полей. Некоторые браузеры могут вызывать проблемы. Chrome и webkit позволяют изменять размер текстовых полей, но если вы добавите resize: none; в свой CSS, он должен отключить его, кроме YMMV.

Answer 4

Следующий CSS работает для Moz Firefox, для html-элементов ввода (submit, button, text), элементов textarea и даже элементов select. Выбранные элементы имеют почти одинаковую длину в браузере, который я пытаюсь.

table {width:100%;}
form input { width: 100%; }
form textarea { width: 100%; overflow-y: scroll; resize: vertical; }
form select { width: 100%; }

Answer 5

Скажите, что ваш HTML выглядит примерно так:

<form><table><tr>
 <td><input type="text" /></td>
 <td><select><option /><option /></select></td>
</tr></table></form>

Как насчет использования input и select для установки ширины?

td { width: auto; }
input[type=text] { width: 100px; }
select { width: 100px; }

Или я неправильно понял вашу проблему?

Answer 6

Не самый полезный ответ, но CSS стили элементов довольно ненадежны между браузерами. Лучше всего подойдет решение на JavaScript, подобное вашему.

Две причины ненадежности:

1. Некоторые функции элементов формы не могут быть описаны CSS. Элемент <select> является хорошим примером: отсутствуют какие-либо свойства CSS, которые могли бы описать различные способы, которыми элемент <select> выглядит в разных операционных системах.

   Попытка выяснить, какие свойства CSS должны влиять на элементы формы и как, - это крысиное гнездо для создателей браузера, поэтому они в основном оставили его в покое. Safari является заметным исключением; см. например http://webkit.org/blog/17/the-new-form-controls-checkbox-2/

2. Можно утверждать, что элементы форм должны выглядеть одинаково между сайтами независимо от намерений владельцев сайтов, чтобы пользователи знали, на что они нажимают.

См. http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ для более глубокого изучения.