Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Красивый input=text / 4 сообщений из 4, страница 1 из 1
13.11.2007, 09:06
    #34934135
crashc
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Красивый input=text
Я что то может туплю, но не кто не кто не рисовал красивый эдит ?
С заливкой или с фоном изображения какого нить!
С картинкой как у гуглов!
Есть примерчики ? Или мат часть ?
...
Рейтинг: 0 / 0
13.11.2007, 09:58
    #34934262
I_Work
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Красивый input=text
Первое, что пришло в голову:
...
Рейтинг: 0 / 0
13.11.2007, 13:28
    #34935143
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Красивый input=text
Наваликом ... сам только недавно делал, только еще элемент был подгружаемым и отправка файла была без перезагрузки страницы - все ajax.
Использовал несколько ссылок:
http://www.quirksmode.org/dom/inputfile.html
http://www.hedgerwow.com/360/dhtml/css-form-file-upload.html

Если интересно, вот результат:

код на странице:
Код: plaintext
1.
<div class="fileinputs" style="position: relative; width: 300px; height: 27px;"><input type="file" class="file" name="file_upload" id="file_upload" style="width: 85px; margin: 0; margin-top: 2px; height: 22px; margin-left: 220px; cursor: hand; cursor: pointer;" onchange="clearError();"></div>

скрипт:
Код: 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.
33.
	var W3CDOM = (document.createElement && document.getElementsByTagName);
	function initFileUploads()
	{
		if (!W3CDOM) return;
		var fakeFileUpload = document.createElement('div');
		fakeFileUpload.className = 'fakefile';
		var overInput = document.createElement('input');
		overInput.disabled = "true";
		fakeFileUpload.appendChild(overInput);
		var image = document.createElement('img');
		image.id = "browse_button";
		image.src='{button link}';
		image.style.width = "87px";
		image.style.height = "27px";
		image.style.verticalAlign = "top";
		image.onmouseover = function() {document.getElementById('browse_button').src = '{button link on mouse over}';};
		image.onmouseout = function() {this.src = '{button link on mouse out}';}; //по-разному обращался, работает и так, и так
		fakeFileUpload.appendChild(image);
		var x = document.getElementsByTagName('input');
		for (var i =  0 ; i < x.length; i++) {
			if (x[i].type != 'file') continue;
			if (x[i].getAttribute('noscript')) continue;
			if (x[i].parentNode.className != 'fileinputs') continue;
			x[i].className = 'file hidden';
			var clone = fakeFileUpload.cloneNode(true);
			x[i].parentNode.appendChild(clone);
			x[i].relatedElement = clone.getElementsByTagName('input')[ 0 ];
			if (x[i].value) x[i].onchange();
			x[i].onchange = function() {this.relatedElement.value = this.value;};
			x[i].onmouseout = function() {document.getElementById('browse_button').src = 'images/btn_browse_dark.png'; this.relatedElement.value = this.value;};
			x[i].onmouseover = function() {document.getElementById('browse_button').src = 'images/btn_browse_light.png';};
		}
	}

стили:
Код: 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.
div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 350px;
	padding:  0 ;
	margin:  0 ;
	z-index:  1 ;
	line-height:  90 %;
}
div.fakefile input {
	margin-bottom: 5px;
	margin-left:  0 ;
}
input {
	border: solid 1px #a7a6aa;
	width: 216px;
	height: 18px;
	font-family: Verdana, Tahoma, Arial;
	color: # 666 ;
	font-size: 10pt; 
}
input.file.hidden {
	position: relative;
	text-align: right;
	-moz-opacity:  0 ;
	filter: alpha(opacity:  0 );
	opacity:  0 ;
	z-index:  2 ;
	float: left;
}

По-большей частью взято из какого-то источника, кое-что переработано.
Есть "помарка" - в фаерфоксе нижний (реальный) инпут смещен вправо, надо в стилях будет подправить, я сделал и побежал дальше, позже планировал исправить.
Насколько помню - размеры не свободные, а подогнанные под реальную кнопку/инпут, поэтому не исключено, что прийдется поэкспериментировать.
Но зато могу заверить, что выглядит хорошо ...
...
Рейтинг: 0 / 0
16.11.2007, 07:26
    #34943594
AvnAvnAvn
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Красивый input=text
Квадратный вид списка не смотрится рядом с округлым полем ввода
Как сделать такой-же красивый список выбора:
<SELECT name='aaa'>...</select>?
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Красивый input=text / 4 сообщений из 4, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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