Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как обвернуть input / 8 сообщений из 8, страница 1 из 1
05.04.2010, 13:28:00
    #36561090
Trfom
Trfom
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обвернуть input
Подскажите как обвернуть поле ввода как на картинке



я создал 3 рисунка, в CSS как их прописать?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.04.2010, 14:00:06
    #36561170
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обвернуть input
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:25:49
    #36561217
Trfom
Trfom
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обвернуть input
krvsa, ну тоесть мы делаем фон из рисунка, это я понял, а если поле начинает растягиваться то рисунок повториться, что есть не очень хорошо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.04.2010, 14:30:42
    #36561232
Trfom
Trfom
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обвернуть input
перечитал топик, понял что не правильно задал вопрос,
я бы хотел получить закругленные уголки и красивый фон на инпутах, но при разных их значениях width
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.04.2010, 21:47:47
    #36562033
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обвернуть input
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
| Ответить | Цитировать | Написать  
06.04.2010, 10:40:18
    #36562632
alexxhub
alexxhub
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как обвернуть input
Код: plaintext
1.
2.
3.
4.
5.
input {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

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


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