Как сделать так, чтобы один тип ввода CSS отображался так же, как другой тип ввода

Question

Я использую специальный тип ввода для браузера iPhone для мобильного сафари:

<li><textarea placeholder="Store Description" ></textarea></li>
<li><input class="input['text']" type="tel" name="name" placeholder="Store Phone Number" id="some_name" /></li>

Проблема в том, что используемый фреймворк имеет стили CSS, связанные с входными данными, которые имеют type="text". Когда я переключаюсь на type="tel", он отображается неправильно. Я хотел бы, чтобы вход использовал один и тот же класс без учета типа ввода . Есть ли способ сделать это?

Answer 1

Есть ли причина, по которой вы не можете изменить CSS?

input[type="text"], input[type="tel"] { /* style */ }

Answer 2

Вам нужно будет скопировать CSS для ввода ['text'] и поместить его в свой собственный класс. Затем вам нужно применить этот класс к вашему текстовому полю. Помните о нацеливании на стиль. Скорее всего, ваш стиль должен быть нацелен на дополнительный селектор, чтобы переопределить стили, определенные для ввода ['text']

Таргетинг CSS: http://htmldog.com/guides/cssadvanced/specificity/

Answer 3

В вашем CSS выберите оба типа ввода:

input[type=text], input[type=tel]{ //CSS style in here
}