CSS для форматирования ввода формы SSN

У меня есть форма, написанная в HTML5 и CSS3, которая имеет некоторые очень специфичные поля (SSN, Phone Number, Initial), которые имеют разную длину. Я пытаюсь выяснить, как форматировать поле ввода, так что это всего лишь X символов в зависимости от ввода (11 для SSN, 1 для Initial, 5 для ZIP ... и т. Д.)CSS для форматирования ввода формы SSN

Я знаю, способный поставить size = "11", и поле ввода (а не метка) будет установлено на этот размер, однако это, кажется, отключено или перезаписывается BS3.

Любые предложения о том, как добиться этого?

Что я для кода на данный момент:

    <div class="form-group"> 
        <label class="control-label" for="SSN">SSN:</label> 
        <input type="email" class="form-control" id="SSN" placeholder="###-##-####" size="12"> 
       </div>

Но это, кажется, не работает, а если я пытаюсь класс = «Col-см-2» (или любое другое число, по этому вопросу) формат становится все глупым (в некоторых случаях не выстраивается правильно).

Заранее спасибо.

источник

2015-06-25 VanCowboy

Поскольку вы помечено html5 вы можете использовать:

<div class="form-group"> 
    <label class="control-label" for="SSN">SSN:</label> 
    <input type="email" class="form-control" id="SSN" placeholder="###-##-####" maxlength="12"> 
</div>

Кстати, class="col-sm-2" класс начальной загрузки, который определяет количество столбцов элемент должен пролет. Посетите http://getbootstrap.com для получения дополнительной информации.

Убедитесь, что ваш html doctype: <!doctype html>, который более или менее означает «использовать html5».

источник

2015-06-26 02:44:48

Благодарим вас за предложение. Попробовал это, и все еще нажал поле ввода оставшейся длины столбца. Я начинаю думать, что bootstrap перезаписывает размер, если поля ввода, однако я не могу найти ничего, что говорит о нем. – VanCowboy

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

Нет проблем. В бутстрапе класс 'form-control' делает входные поля шириной 100%. Возможно, вам стоит потратить некоторое время на чтение документации к бутстрапу. Кроме того, если вы используете Chrome, вы можете щелкнуть правой кнопкой мыши на вкладке и нажать «проверить элемент», чтобы открыть инструменты разработчика Chrome. Там вы можете видеть все стили CSS, связанные с элементом (а также редактировать их в прямом эфире). –

CSS для форматирования ввода формы SSN

ответ

Смежные вопросы