ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как обвернуть input
8 сообщений из 8, страница 1 из 1
Как обвернуть input
    #36561090
Trfom
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Trfom
Гость
Подскажите как обвернуть поле ввода как на картинке



я создал 3 рисунка, в CSS как их прописать?
...
Рейтинг: 0 / 0
05.04.2010, 13:28:00
| Ответить | Цитировать | Написать  
Как обвернуть input
    #36561170
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Trfomя создал 3 рисунка
Если это рисунки показаные серым - то достаточно одного (целого)

Код: plaintext
1.
2.
3.
4.
5.
...
.mail_fon {
    background: url('img/mail_fon.png') no-repeat;
}
...
<div class='mail_fon'><input type='text' /></div>
...
Рейтинг: 0 / 0
05.04.2010, 14:00:06
| Ответить | Цитировать | Написать  
Как обвернуть input
    #36561217
Trfom
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Trfom
Гость
krvsa, ну тоесть мы делаем фон из рисунка, это я понял, а если поле начинает растягиваться то рисунок повториться, что есть не очень хорошо.
...
Рейтинг: 0 / 0
05.04.2010, 14:25:49
| Ответить | Цитировать | Написать  
Как обвернуть input
    #36561232
Trfom
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Trfom
Гость
перечитал топик, понял что не правильно задал вопрос,
я бы хотел получить закругленные уголки и красивый фон на инпутах, но при разных их значениях width
...
Рейтинг: 0 / 0
05.04.2010, 14:30:42
| Ответить | Цитировать | Написать  
Как обвернуть input
    #36562033
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Trfomя бы хотел получить закругленные уголки и красивый фон на инпутах, но при разных их значениях width
Как вариант...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
<HTML>
<HEAD>
<TITLE>Example of the doScroll Method</TITLE>
<STYLE>
#cont {
	position: relative;
	width: 100px;
	height: 20px;
	background-color: silver;
}
#txt {
	width: 70px;
	margin-left: 15px;
	margin-right: 15px;
	border:  0 ;
}
.right { 
	position: absolute;
	top:  0 ;
	right:  0 ;
	width: 15px;
	height:  100 %;
	background-color: red;
}
</STYLE>
</HEAD>
<BODY>
<div id='cont'>
	<input type='text' id='txt' />
	<div class='right'></div>
</div>
</BODY>
</HTML>

Остаётся только:
- подобрать размеры
- в уголки сунуть соответствующие картинки фоном
- заполнить градиентом инпут
...
Рейтинг: 0 / 0
05.04.2010, 21:47:47
| Ответить | Цитировать | Написать  
Как обвернуть input
    #36562632
alexxhub
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
alexxhub
Гость
Код: plaintext
1.
2.
3.
4.
5.
input {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

И не надо картинок. Но правда работает не во всех браузерах. Но как вариант.
...
Рейтинг: 0 / 0
06.04.2010, 10:40:18
| Ответить | Цитировать | Написать  
Как обвернуть input
    #36562859
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
alexxhubНо правда работает не во всех браузерах.
Может потом когда-то заработает... А чего! Пусть совершенствуются...
...
Рейтинг: 0 / 0
06.04.2010, 11:39:13
| Ответить | Цитировать | Написать  
Как обвернуть input
    #36564699
alexxhub
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
alexxhub
Гость
krvsaalexxhubНо правда работает не во всех браузерах.
Может потом когда-то заработает... А чего! Пусть совершенствуются...
Ну фаерфокс, опера 10.5, хром работают. А тем кто использует IE лучше даже и не мечтать о хорошем. Хотя в 8 версии тоже вроде нормально.
...
Рейтинг: 0 / 0
07.04.2010, 01:36:38
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как обвернуть input
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=36562859&tid=1453266]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 212ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 29ms
get tp. blocked users:
 1ms
others: 221ms
total:  507ms
созд. / загр.: 507ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]