Украшаем input с помощью CSS. Продолжение.
May 7th, 2008 by Yuriy DrozdovСегодня продолжу мучать html тег input в целях улучшения его юзабилити. Начало можно почитать в статье "Украшаем input с помощью CSS".
Спасибо всем кто проявил участие в обсуждении прошлой статьи и внес замечания, которые сегодня постараюсь учесть. Хотелось бы особо отметить Жеку, Евгения, а также того человека, который в комментариях подписался Victoria.
Прежде чем продолжить украшать input хотелось бы провести небольшой рефакторинг css кода.
Как правильно заметил Жека, при переполнении текстового поля ввода, именуемого разработчиками input, текст залазит на картинку и никакой text-indent уже не спасает. Поэтому меняем text-indent:20px на padding-left:20px. При такой замене текст не наезжает на картинку в браузерах IE 7, FF 2 и Safari 3.1.1 под Windows. К сожалению, в Opera 9.24 остается факт наезжания текста на картинку. Если Вы знаете как это полечить в Opera, можете высказаться в комментариях. Мне же приходит в голову разве что растянуть input по ширине, чтобы он не переполнялся, если это позволяет дизайн сайта.
Victoria заметила, что в Safari картинка сполза на border текстового поля, предложив исправить это css свойством line-height. Так и поступим, добавив еще свойство font-size и width для идентичного отображения в браузерах.
Получим.
-
#find {
-
background: url('find.png') no-repeat 1px 1px;
-
border:solid 1px #848388;
-
font-size:14px;
-
padding-left:20px;
-
line-height:14px;
-
width:180px;
-
}
Выше был небольшой рефакторинг прошлых действий, пора делать следующий шаг. Следующим шагом будет изминение заднего фона текстового поля, когда в него вводят текст или выражаясь в терминах разработчиков, на нем есть фокус. В css есть специальный, так называемый, динамический псевдокласс :focus. Из спецификации :
Псевдокласс :focus применяется, когда элемент находится в центре некоторых событий (обрабатывает события клавиатуры или другие типы ввода текста).
Добавим новое правило стиля.
-
#find:focus {
-
background-color:#F0F0F0;
-
}
Оно даст нам изминение заднего фона во всех выше перечисленных браузерах, кроме IE, который данный псевдокласс не поддерживает. Но это можно исправить вставив небольшой javascript в html код. А имменно добавим на событие onfocus изминение цвета заднего фона.
-
<input type="text" id="find" name="find" onfocus="this.style.backgroundColor='#F0F0F0';" />
Было бы неплохо добавить в текстовое поле подсказку для пользователя, для чего это поле предназначено. Например, добавив текст "Введите текст для поиска". И было бы очень раздражительно, по крайней мере для меня, вручную удалять этот текст, для того чтобы вводить поисковую фразу, пусть это делает javascript. Опять же при фокусе на текстовом поле, будем стирать надпись, а при удалении фокуса (событие onblur) проверять, если текст не был введен, опять выводить подсказку.
-
<input type="text" id="find" name="find" value="Введите текст для поиска" onfocus="this.style.backgroundColor='#F0F0F0';this.value='';" onblur="this.style.backgroundColor='#FFFFFF';if (this.value != '') {this.onfocus = function(){this.style.backgroundColor='#F0F0F0';};} else this.value='Введите текст для поиска';" />
В действии все будет работать так:
В создании этой статьи мне помогла статья с сайта CSS-Tricks.com, которая называется Tips For Creating Great Web Forms. Хотелось бы сказать, что CSS-Tricks.com весьма полезный и интересный сайт для людей увлекающимися css, многие статьи с этого сайта обрели хороший русский перевод и осели на страницах не менее полезного блога Life Style.
И напоследок, спрошу, может кто знает хороший русский аналог слова юзабилити ?
“Удобство использования”. Одним словом, наверное, не получится
Спасибо. Думаю, удобство использования хороший аналог
Эргономичность (как клавиатуры)
Удобоваримость
Скрипт для поискового поля, который убирает надпись “Введите текст для поиска” содержит ошибку. Эта ошибку вряд ли увидит среднестатистический пользователь, однако если уж делать, то делать нужно на все 100) К примеру если проделать такую комбинацию: войти в поле, ввести текст, выйти из поля, войти в поле и удалить введенный текст, выйти из поля - появится фраза “Введите текст для поиска”. НО. если опять зайти в поле, то эта фраза уже не исчезнет.
В IE v.6 кога вводишь длинный текст, фоновое изображение уезжает “из кадра” вместе с текстом
Как в этом случае быть?
задать css свойство background-attachment: fixed;