powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Красивый input=text
4 сообщений из 4, страница 1 из 1
Красивый input=text
    #34934135
crashc
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Я что то может туплю, но не кто не кто не рисовал красивый эдит ?
С заливкой или с фоном изображения какого нить!
С картинкой как у гуглов!
Есть примерчики ? Или мат часть ?
...
Рейтинг: 0 / 0
Красивый input=text
    #34934262
I_Work
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Первое, что пришло в голову:
...
Рейтинг: 0 / 0
Красивый input=text
    #34935143
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Наваликом ... сам только недавно делал, только еще элемент был подгружаемым и отправка файла была без перезагрузки страницы - все 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
Красивый input=text
    #34943594
AvnAvnAvn
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Квадратный вид списка не смотрится рядом с округлым полем ввода
Как сделать такой-же красивый список выбора:
<SELECT name='aaa'>...</select>?
...
Рейтинг: 0 / 0
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Красивый input=text
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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