Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Иконки в текстовом поле
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Иконки в текстовом поле

Страниц (1): [1]
 

1. Jakeryf - 11 Апреля, 2007 - 21:15:44 - перейти к сообщению
Наверняка встречали текстовые поля с изображениями в них, вот как я это реализовал

PHP:
скопировать код в буфер обмена
  1.  
  2. <style>
  3. .field {
  4.   background: #FFF;
  5.  width: 150px;
  6.   border: 1px solid #CCC;
  7.  padding-left: 1px;
  8.   margin-bottom: 5px;
  9. }
  10.  
  11. .into {
  12.   border: 0;
  13.   width: 120px;
  14.   color: #6DA4D8;
  15.  font-weight: bold;
  16. }
  17. </style>
  18. <div class="field">
  19. <img src="./images/user.gif" alt="login" style="margin-top: 3px;" /> <input type="text" class="into" name="login" />
  20. </div>
  21.  
  22. <div class="field">
  23. <img src="./images/key.gif" alt="pass" style="margin-top: 3px;" />
  24.  <input type="password" class="into" name="pass" />
  25. </div>
  26.  


2. kamikadze - 11 Апреля, 2007 - 21:19:16 - перейти к сообщению
А высоту вы выставил то как?\n\n(Добавление)
Ну естествоенно я так понял что "красивее" её Выставить! А выставить чак чтоб картинка смотрелась гармонично!Радость
3. Jakeryf - 11 Апреля, 2007 - 21:24:03 - перейти к сообщению
kamikadze
Я нигде не выставлял высоту, без надобности. Иконки 16х16 размер
4. valenok - 11 Апреля, 2007 - 21:25:17 - перейти к сообщению
PHP:
скопировать код в буфер обмена
  1.  
  2. <style>
  3. .f{background: url(http://www.php.su/forum/templates/InvisionExBB/im/home.gif) 2% 15% no-repeat;}
  4. </style>
  5.  
  6. <input class='f'>
  7.  
  8.  
5. Jakeryf - 11 Апреля, 2007 - 21:30:32 - перейти к сообщению
valenok
в твоем кода надо еще padding-left ставить, чтобы текст на картинку не зходил
6. valenok - 11 Апреля, 2007 - 21:40:01 - перейти к сообщению
Так, для наглядности, в более конкурентно способном виде .

PHP:
скопировать код в буфер обмена
  1.  
  2. <style>
  3.  .into {
  4.    border: 1px solid;
  5.    width: 150px;
  6.    color: #6DA4D8;
  7.   padding-left: 25px;
  8.    font-weight: bold;
  9.  }
  10.  
  11.  .login {background: url(http://www.php.su/forum/templates/InvisionExBB/im/home.gif) 2% 15% no-repeat;}
  12.  .pass {background: url(http://www.php.su/forum/templates/InvisionExBB/im/atb_help.gif) 2% 15% no-repeat;}
  13.  
  14.  </style>
  15.  
  16.  
  17.   <input type="text" class="into login" name="login" /> < br>< br>
  18.   <input type="password" class="into pass" name="pass" />
  19.  
7. Mister - 12 Апреля, 2007 - 18:23:16 - перейти к сообщению
Хорошо получилось, у меня такая мысль даже и не возникала. А можно как - нибудь сделать чтобы после того как я начал текст вводить иконка убиралась?
8. kamikadze - 12 Апреля, 2007 - 20:23:40 - перейти к сообщению
Событиями!
9. -SCHATTEN- - 12 Апреля, 2007 - 20:29:15 - перейти к сообщению
kamikadze
Раз начал , то и обьясняй до конца, что и как.
10. kamikadze - 12 Апреля, 2007 - 20:30:35 - перейти к сообщению
Растерялся Я чесно не особо в яве но раз уж до того пошло, если до меня никто не напишет я постараюсь обьяснить!\n\n(Добавление)
Кстати картинка сама ж не в поле ввода!!!
11. valenok - 12 Апреля, 2007 - 22:19:29 - перейти к сообщению
У Jakeryf картинка не в поле ввода.
У него картинка убирается посредством DOM Тоесть вот так:
PHP:
скопировать код в буфер обмена
  1.  
  2.  <div class="field" id='pass'>
  3.  <img src="./images/user.gif" alt="login" style="margin-top: 3px;" /> <input type="text" class="into" name="login" onfocus="removei('login')" />
  4.  </div>
  5.  
  6.  <div class="field" id='pass'>
  7.  <img src="./images/key.gif" alt="pass" style="margin-top: 3px;" />
  8.   <input type="password" class="into" name="pass" onfocus="removei('pass')" />
  9.  </div>
  10.  
  11. <script>
  12. function removei(div){
  13. bodyElement = document.getElementById('div');
  14. if (bodyElement.hasChildNodes()) {
  15.         for (i=0; i<bodyElement.childNodes.length; i++) {
  16.           var currentNode = bodyElement.childNodes[i];
  17.           if (currentNode.nodeName.toLowerCase() == "img") {
  18.             bodyElement.removeChild(currentNode);
  19.           }
  20.         }
  21.       }
  22.  
  23. }
  24.  




В моём коде картинка находится непосредственно в текстовом поле, и её можно убрать изменив параметр background:
PHP:
скопировать код в буфер обмена
  1.  
  2.    <input type="text" class="into login" name="login" onfocus="this.style.background='#FFFFFF;'"/>
  3.      < br>< br>
  4.    <input type="password" class="into pass" name="pass" onfocus="this.style.background='#FFFFFF;'"/>  
  5.  

12. Стас - 09 Июня, 2007 - 14:49:24 - перейти к сообщению
Решил себе так...

А можно сделать так чтобы картинка возвращалась, когда ввод окончен и курсора в поле нет?
13. kamikadze - 11 Июня, 2007 - 11:21:06 - перейти к сообщению
И картинка будет собой накрывать текст, точнее быть для текста бегграундом?
14. valenok - 15 Июня, 2007 - 00:21:28 - перейти к сообщению
можно. убираем картинку, а потом возвращаем
Как убрать уже писали.
Возвратить почти также.
События onfocus / onblur
15. Hunter - 17 Января, 2010 - 06:17:54 - перейти к сообщению
Jakeryf, valenok
супер Радость
а можно пример такой же фишки для элемента <SELECT>????

 

Powered by ExBB FM 1.0 RC1