Оформление input text и submit с помощью CSS

Оформление input text и submit с помощью CSS без использования class и id это частный случай, который тем не менее, встречается довольно часто. Допустим, что нет возможности залезть в код и присвоить class для input, а в нашем распоряжении есть конструкция приведенная на скрине ниже и общий файл для всего сайта style.css.

input text submit

То есть мы имеем поле для ввода текста input text и кнопку input submit. Наша задача, постарасться с помощью CSS, изменить, точнее стилизовать под те же элементы встречающиеся на прочих страницах сайта.

Задача благодаря CSS решается довольно просто, посредством указания конкретно каждого из свойств input - text или submit соответственно в квадратных скобках. Пример использования правила для нашего примера приведен ниже.


input[type=text] {
border: 1px solid #444;
padding: 2px;
}


input[type=submit] {
color: #000000;
background-color: #FFFFFF;
border: 1px solid rgba(118,2,0,1);
}


input[type=submit]:hover {
color: #fff;
background-color: rgba(118,2,0,1);
}

Третий вариант с hover

Третий вариант с hover может потребоваться если мы захотим заставить кнопку поменять свой стиль, при наведении на нее указателя мышки. В данном примере, при наведении, фон кнопки поменяется на цвет рамки (background-color: rgba(118,2,0,1);), а цвет текста кнопки изменится на контрстный - белый.

input text submit css

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

Поделиться!

Оставить Комментарий