Стилизация ширины поля ввода кросс-браузера - PullRequest
Новая
       6

Стилизация ширины поля ввода кросс-браузера

6 голосов
/ 16 марта 2010

У меня есть форма ввода для доставки / выставления счета, и у меня возникают проблемы с тем, чтобы поля ввода были одинаковой ширины ...

Проблема:
-поле <input type="text" size="X" /> отображается в разных браузерах с разными размерами (см. ссылка ).
-Кроме того, поля выбора, похоже, отображаются по-другому.
-Chrome / safari не отвечает на свойство font-size для выбранных полей.

Любое руководство о том, как стилизовать размер ввода текста и выбор полей для кроссбраузерности, было бы очень полезно.

Должен ли я иметь разные таблицы для каждого браузера ... только для этих полей ввода? -Спасибо

Ответы [ 2 ]

4 голосов
/ 16 марта 2010

Сначала удалите этот встроенный атрибут "size". Вы должны использовать CSS для стилизации формы ввода: 

input[type="text"] {
    width: 100px;

    /* You can also style padding, margins and everything else,
     * just remember that inputs of type "text" can only be one line. 
     */
}

Не используйте [type = "text"] в качестве селектора. Я просто использовал его в этом примере, чтобы связать его с полями ввода типа «текст», но он не полностью поддерживается в разных браузерах Вы должны дать своим полям ввода текста свой собственный класс для стилизации.

Кроме того, не забудьте сбросить настройки CSS, чтобы убедиться, что поля, границы и т. Д. и др. сбрасываются для всех браузеров. http://meyerweb.com/eric/tools/css/reset/

0 голосов
/ 15 июля 2016

В настоящее время можно нормализовать ширину «размерных» входов с помощью блока ch , который достиг достойной поддержки браузера.

К сожалению, по-прежнему невозможно писать: 

input[size] {
  width: attr(size) "ch";
}

Таким образом, мы должны стилизовать ширину, которую мы знаем , которую будем использовать: 

input[size="10"] {width: 10ch;}
input[size="20"] {width: 20ch;}
input[size="30"] {width: 30ch;}
/* etc. */

Это можно легко автоматизировать с помощью препроцессора CSS.

ОБНОВЛЕНИЕ:

Я сделал тестовую скрипку .На сегодняшний день (февраль 2018 г.) это работает в Windows 10 с Chrome 63, Edge 41, FF 58. В IE 11 происходит сбой.Я не пробовал на OS X.

...