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

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Иконки в текстовом поле

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Описание: красиво получилось
Поиск в теме | Версия для печати
Jakeryf
Отправлено: 11 Апреля, 2007 - 21:15:44
Post Id



Новичок


Покинул форум
Сообщений всего: 31
Дата рег-ции: Янв. 2007  
Откуда: System Virta


Помог: 0 раз(а)
Наверняка встречали текстовые поля с изображениями в них, вот как я это реализовал

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.  



Прикреплено изображение
att-461d25d0ec633ogin.gif


-----
What's common between Halloween and Christmas? Every programmer knows: 31 oct = 25 dec.
 
 Top
kamikadze
Отправлено: 11 Апреля, 2007 - 21:19:16
Post Id



Склонен к самоубийству


Покинул форум
Сообщений всего: 391
Дата рег-ции: Янв. 2007  


Помог: 0 раз(а)
А высоту вы выставил то как?\n\n(Добавление)
Ну естествоенно я так понял что "красивее" её Выставить! А выставить чак чтоб картинка смотрелась гармонично!Радость
 
 Top
Jakeryf
Отправлено: 11 Апреля, 2007 - 21:24:03
Post Id



Новичок


Покинул форум
Сообщений всего: 31
Дата рег-ции: Янв. 2007  
Откуда: System Virta


Помог: 0 раз(а)
kamikadze
Я нигде не выставлял высоту, без надобности. Иконки 16х16 размер


-----
What's common between Halloween and Christmas? Every programmer knows: 31 oct = 25 dec.
 
 Top
valenok
Отправлено: 11 Апреля, 2007 - 21:25:17
Post Id



Здесь могла бы быть ваша реклама


Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006  
Откуда: Israel


Помог: 3 раз(а)
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.  


-----
Truly yours, Sasha.
 
My status
 Top
Jakeryf
Отправлено: 11 Апреля, 2007 - 21:30:32
Post Id



Новичок


Покинул форум
Сообщений всего: 31
Дата рег-ции: Янв. 2007  
Откуда: System Virta


Помог: 0 раз(а)
valenok
в твоем кода надо еще padding-left ставить, чтобы текст на картинку не зходил


-----
What's common between Halloween and Christmas? Every programmer knows: 31 oct = 25 dec.
 
 Top
valenok
Отправлено: 11 Апреля, 2007 - 21:40:01
Post Id



Здесь могла бы быть ваша реклама


Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006  
Откуда: Israel


Помог: 3 раз(а)
Так, для наглядности, в более конкурентно способном виде .

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.  

Прикреплено изображение
att-461d2b816ca55tled.JPG


-----
Truly yours, Sasha.
 
My status
 Top
Mister
Отправлено: 12 Апреля, 2007 - 18:23:16
Post Id



Посетитель


Покинул форум
Сообщений всего: 282
Дата рег-ции: Янв. 2007  
Откуда: Сухиничи Калуж.обл.


Помог: 0 раз(а)

[+]
Хорошо получилось, у меня такая мысль даже и не возникала. А можно как - нибудь сделать чтобы после того как я начал текст вводить иконка убиралась?


-----
..я не специалист, а только учусь
 
 Top
kamikadze
Отправлено: 12 Апреля, 2007 - 20:23:40
Post Id



Склонен к самоубийству


Покинул форум
Сообщений всего: 391
Дата рег-ции: Янв. 2007  


Помог: 0 раз(а)
Событиями!
 
 Top
-SCHATTEN-
Отправлено: 12 Апреля, 2007 - 20:29:15
Post Id



Пользователь


Покинул форум
Сообщений всего: 615
Дата рег-ции: Июль 2006  
Откуда: Оттуда !


Помог: 0 раз(а)
kamikadze
Раз начал , то и обьясняй до конца, что и как.
 
 Top
kamikadze
Отправлено: 12 Апреля, 2007 - 20:30:35
Post Id



Склонен к самоубийству


Покинул форум
Сообщений всего: 391
Дата рег-ции: Янв. 2007  


Помог: 0 раз(а)
Растерялся Я чесно не особо в яве но раз уж до того пошло, если до меня никто не напишет я постараюсь обьяснить!\n\n(Добавление)
Кстати картинка сама ж не в поле ввода!!!
 
 Top
valenok
Отправлено: 12 Апреля, 2007 - 22:19:29
Post Id



Здесь могла бы быть ваша реклама


Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006  
Откуда: Israel


Помог: 3 раз(а)
У 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.  



-----
Truly yours, Sasha.
 
My status
 Top
Стас
Отправлено: 09 Июня, 2007 - 14:49:24
Post Id


Частый гость


Покинул форум
Сообщений всего: 147
Дата рег-ции: Май 2007  


Помог: 0 раз(а)

[+]
Решил себе так...

А можно сделать так чтобы картинка возвращалась, когда ввод окончен и курсора в поле нет?
 
 Top
kamikadze
Отправлено: 11 Июня, 2007 - 11:21:06
Post Id



Склонен к самоубийству


Покинул форум
Сообщений всего: 391
Дата рег-ции: Янв. 2007  


Помог: 0 раз(а)
И картинка будет собой накрывать текст, точнее быть для текста бегграундом?
 
 Top
valenok
Отправлено: 15 Июня, 2007 - 00:21:28
Post Id



Здесь могла бы быть ваша реклама


Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006  
Откуда: Israel


Помог: 3 раз(а)
можно. убираем картинку, а потом возвращаем
Как убрать уже писали.
Возвратить почти также.
События onfocus / onblur


-----
Truly yours, Sasha.
 
My status
 Top
Hunter
Отправлено: 17 Января, 2010 - 06:17:54
Post Id



Частый гость


Покинул форум
Сообщений всего: 214
Дата рег-ции: Дек. 2009  
Откуда: Блага


Помог: 0 раз(а)
Jakeryf, valenok
супер Радость
а можно пример такой же фишки для элемента <SELECT>????
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


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



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB