Блог старого компьютера

Блог старого компьютера


Главная html & css Задать тегу input стиль по его типу

Задать тегу input стиль по его типу

30.01.2013 03:13 Администратор html & css
Печать PDF

Очень часто есть необходимость задать тегу input стиль отталкиваясь от его типа. Многие просто для этого разным типам назначают разные классы, в этом нет ничего плохого, но как быть когда вам уже в готовом проекте нужно дать разные начертания тегам input. Поиск где они находятся для того чтоб добавить каждому класс может занять время, которого зачастую совершенно нету. Тогда на помощь приходит замечательная возможность css которая специально созданна для таких случаев.

Все что нам нужно это отредактировать css файл проекта, либо просто занести в них нужные строки.

 

Рассмотрим небольшой html код который включает в себя 4 разных типа тега input:

<div class="wrapp">
<input type="text">
<input type="checkbox">
<input type="radio">
<input type="submit">
</div>

 Если мы просто задаим стиль тегу input то выглядеть они будут одинаково. К примеру добавил свойство border.

 Код будет выглядеть так:

<style>
.wrapp input{
border:1px solid;
}
</style>
<div class="wrapp">
<input type="text">
<input type="checkbox">
<input type="radio">
<input type="submit">
</div>

 А результат его выполнения будет таким:

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

 Вот такая вот бяка, но стойте не нужно добавлять каждому элементу свой класс, давайте рассмотрим как по типу поля задать им стили.

Поставим перед собой задачу увеличить длинну только текстового поля.

Код будет выглядеть так:

<style>
.wrapp input{
border:1px solid orange;
}
.wrapp input[type=text]{
width:250px;
}
</style>
<div class="wrapp">
<input type="text">
<input type="checkbox">
<input type="radio">
<input type="submit">
</div>

 А результат будет таким:

Вот таким вот простым способом можно стилизовать тег input по его атрибуту type. Сложного тут ничего нет, но как оказывается не все об этом знают!

 

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?