Четверг, 10 Января 2013 16:34

Стилизация элементов на focus

Written by 
Оцени эту запись
(4 Голоса)

Состояние focus свойственно элементам управления и ссылкам. Для элемента управления <input type="text/password/email"> состояние focus наступает, когда в поле ставится курсор. У ссылки focus можно получить при помощи клавиши Tab при наличии атрибута tabindex.

 

 

Рассмотрим стилизацию элемента <input type="text"> в фокусе:

 

 

<input type="text" class="focus_elem">

 

 

Со CSS стилями:

 

.focus_elem {

width: 150px;

height: 30px;

line-height: 30px;

background: #eee;

border: 1px solid blue;

color: blue;

}

 

Получили такой элемент:

 

 

А теперь изменим его внешний вид при получении фокуса:

 

.focus_elem:focus {

border: 1px solid violet;

background: #fff;

}

 

 

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

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов