Как получить одинаковую ширину полей ввода и выбора

109

В форме у меня есть одно поле выбора и два поля ввода. Эти элементы выровнены по вертикали. К сожалению, у меня не получается добиться одинаковой ширины этих элементов.

Вот мой код:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

В приведенном выше примере лучшая ширина для элемента выбора составляет 198 или 199 пикселей (конечно, я пробовал 193 пикселей, но разница существенная). Я думаю, это зависит от разрешения, на разных компьютерах и браузерах, поскольку эти элементы не имеют одинаковой ширины (иногда мне кажется, что разница составляет около 1 или 2 пикселей). Я пробовал установить эти элементы в строки div или таблицы, но это не помогает.

Q: Как я могу получить точно одинаковую ширину этих элементов?

— luk4443
источник

1

Тот же вопрос задан здесь: stackoverflow.com/questions/895904/…

— BlaM

134

Обновленный ответ

Вот как изменить блочную модель, используемую элементами input / textarea / select, чтобы все они вели себя одинаково. Вам необходимо использовать box-sizingсвойство, которое реализовано с префиксом для каждого браузера.

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

Это означает, что разница в 2 пикселя, о которой мы упоминали ранее, не существует.

пример на http://www.jsfiddle.net/gaby/WaxTS/5/

примечание: в IE он работает с версии 8 и выше.

Оригинал

если вы сбросите их границы, то selectэлемент всегда будет на 2 пикселя меньше inputэлементов ..

пример: http://www.jsfiddle.net/gaby/WaxTS/2/

— Габриэле Петриоли
источник

Спасибо за ответ. И если я установлю границу на 2 пикселя, между полями ввода и выбора будет 4 пикселя, для границы 3 пикселя - 6 пикселей ...?

— luk4443 01

1

@luk, нет. Если и input, и select имеют одинаковую ширину границы, то разница останется на 2 пикселя ..

— Габриэле Петриоли, 01

Спасибо. Я пробую ваш код в разных браузерах, и в Firefox все в порядке, но он не работает в IE 8 и Opera (есть различия между вводом и выбором ширины) :(

— luk4443 01

1

Возможно, вы хотели указать размер блока: граница-бокс? Думаю, вы это имели в виду. Поле содержимого - это значение по умолчанию, где отступы + поля добавляют к ширине.

— О'Руни

1

Это действительно должно быть: -ms-box-sizing: content-box; -moz-box-sizing: поле содержимого; -webkit-box-sizing: контент-бокс; размер коробки: коробка содержимого; Стандартный синтаксис должен идти последним в соответствии с методологией прогрессивного улучшения, чтобы в будущем, когда стандарт будет широко внедрен, пользовательские агенты по умолчанию будут использовать стандартный синтаксис, и вы сможете удалить версии с префиксом.

— user1739635

118

Я попробовал ответ Габи (+1) выше, но он только частично решил мою проблему. Вместо этого я использовал следующий CSS, в котором поле содержимого было изменено на поле границы:

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

— Томсв
источник

Да, кажется, что поля формы, например: textarea, поля ввода всегда хорошо работают с моделью поля с рамкой. кнопка, флажок, радио, отправка, сброс и поисковый ввод по умолчанию являются рамкой.

— Vennsoh

2

Вот хороший аргумент, почему вам следует использоватьbox-sizing: border-box . Для хорошей универсальной реализации рассмотрите возможность установки на верхнем уровне элемента html, а затем наследования вниз, чтобы его можно было легко переопределить.

— KyleMit

content-box ничего не сделал в моем случае. Мне нужно, чтобы границы были одинаковой ширины. Border-box определенно лучшее решение, спасибо.

— Мануэль Хоффманн

6

Добавьте этот код в css:

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

— 151291
источник

-4

создайте еще один класс и увеличьте размер с помощью примера 2px

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

— ionMobDev
источник