Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.11.2009, 13:21
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Как сделать INPUT с красивым задним фоном?
День добрый, пытаюсь разобраться как правильно привязывать задний фон к input. Но пока в разных браузерах отображается по-разному. Особенно не понравился ИЕ, в нем фон "уезжает" если набирать символов больше чем длина элемента.
Во вложении я прикрепил задний фон поля, если есть умельцы нашедшие вариант как правильно привязывать фон к полям, то прошу помочь.

Пример поля:
<input name="login" type="text" class="input" id="login" value="Логин" maxlength="30" />


И еще интересует такой вопрос: в ИЕ при вводе пароля символы заменяются на большие точки, в опере на звездочки.... А можно ли как-то задавать эти символы?
Изображения:
Тип файла: jpg input.jpg (5.5 Кб, 11 просмотров)
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #2 (permalink)  
Старый 20.11.2009, 14:08
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Тут без JS не обойтись точно... Инпут самый плохо контролируемый стилями элемент.
А для символов - нада писать свой пассворд.
Ответить с цитированием
  #3 (permalink)  
Старый 20.11.2009, 14:17
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Пример: http://realcode.ru/, в шапке справа.
Стили:
#searchForm input {
	width: 146px;
	height: 18px;
	border: 0;
	padding: 5px 10px 0 23px;
	background: url('../images/searchInputBackground.gif');
	font-size: 12px;
	outline: 0;
}

#searchForm button {
	display: none;
}

Последний раз редактировалось Riim, 20.11.2009 в 14:19.
Ответить с цитированием
  #4 (permalink)  
Старый 20.11.2009, 14:35
N_L N_L вне форума
Аспирант
Посмотреть профиль Найти все сообщения от N_L
 
Регистрация: 03.09.2009
Сообщений: 55

..................................
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOL
Ответить с цитированием
  #5 (permalink)  
Старый 20.11.2009, 14:45
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Сообщение от Riim
Пример: http://realcode.ru/, в шапке справа.
к сожалению даже этот вариант в ИЕ фон убегает....
Как я понимаю так просто тут не сделать... значит просто буду делать инпут без фона и границ, а под input к примеру ложить div....

N_L,
Сообщение от N_L
..................................
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOL
как я понимаю это клон Nemo, он тут видимо публику веселит.... )
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #6 (permalink)  
Старый 20.11.2009, 15:02
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Сообщение от greatilya
в ИЕ фон убегает
блин, в IE7 и правда убегает, я в IE8 сначала смотрел, там нормально все.
Ответить с цитированием
  #7 (permalink)  
Старый 20.11.2009, 15:25
N_L N_L вне форума
Аспирант
Посмотреть профиль Найти все сообщения от N_L
 
Регистрация: 03.09.2009
Сообщений: 55

пф.. создовай отдельный блок с рисунком а в этот блок помещай инпат. пример в моей студии.
Ответить с цитированием
  #8 (permalink)  
Старый 20.11.2009, 15:25
N_L N_L вне форума
Аспирант
Посмотреть профиль Найти все сообщения от N_L
 
Регистрация: 03.09.2009
Сообщений: 55

нуб.
Ответить с цитированием
  #9 (permalink)  
Старый 21.11.2009, 04:43
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Сообщение от N_L
создовай отдельный блок с рисунком а в этот блок помещай инпат
читай внимательней.... цель начальная была сделать это за счет CSS. А твой вариант сможет осуществить и школьник...
Сообщение от N_L
нуб
нуб - не умничай ботаник?
)
Сообщение от N_L
пример в моей студии
адресок студии можно? авось посмеюсь.
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #10 (permalink)  
Старый 21.11.2009, 13:31
Профессор
Отправить личное сообщение для nemo Посмотреть профиль Найти все сообщения от nemo
 
Регистрация: 22.05.2009
Сообщений: 505

по другому нельзя, вопрос весьма, глупый, можно было самому догадатся.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24
как сделать плавное затухание страницы magistr_bender Элементы интерфейса 1 18.03.2009 14:34
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55