Форум

pt81 · #1 (**permalink**) 25.11.2010, 19:07

Сделал свой input file выглядит в виде ссылке при клике на которую открывается диалог выбора файла.
Все хорошо но нужен у ссылки стиль cursor

ointer. Cделать не получается так как input type=file не признает такой стиль об чем везде написано.
Ну а ссылке давать стиль бесполезно, все равно курсор не рука.

html такой

Код:

<div style="width: 160px; height: 20px; overflow: hidden;"
 id="foto_form_div">

<a class="addm" href="#" id="foto_upload_link">Загрузить фото</a> 

<input  type="file" id="foto_upload" name="foto_upload" 
style="font-size: 30px; width: 160px; opacity: 0; filter:alpha(opacity: 0);
  position: relative; top: -40px;; left: 0px" 
/>

</div>

ksa · #2 (**permalink**) 25.11.2010, 20:11

Даааа... На этой кнопке "Обзор" курсор и помирает...

B@rmaley.e><e · #3 (**permalink**) 25.11.2010, 20:15

Сделайте див-обертку, которой задавайте курсор.

pt81 · #4 (**permalink**) 25.11.2010, 20:16

Но я нашел плагин где курсор не помирает

http://rozhdestvenskiy.ru/projects/c...file/demo.html

Никак не могу понять как они этого добились???

pt81 · #5 (**permalink**) 25.11.2010, 20:16

Сообщение от B@rmaley.e><e

Сделайте див-обертку, которой задавайте курсор.

Так делаю...

pt81 · #6 (**permalink**) 25.11.2010, 20:20

Вот полностью мой код без всякий лишних классов и id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site :: </title>
<script src="/js/jquery-1.4.3.min.js"></script>
<script src="/js/jquery.form.js"></script>
</head>

<body>

<form enctype="multipart/form-data" method="POST" action="/ajax/profile/planeform_foto.php">

<div style="width: 160px; height: 20px; overflow: hidden; z-index: 10000000;">
<a href="#">Загрузить фото</a>
<input type="file"
style="font-size: 600px; width: 160px; opacity: 0; position: relative; top: -40px; left: 0px" />

</div>

</form>

</body>
</html>

Неужели никак не вернуть курсор

ksa · #7 (**permalink**) 25.11.2010, 20:23

Сообщение от B@rmaley.e><e

Сделайте див-обертку, которой задавайте курсор.

И оборачивал... И накладывал... И изнутри накрывал... Как только курсор попадает на область с кнопкой "Обзор" - "рука" пропадает...

ksa · #8 (**permalink**) 25.11.2010, 20:24

Сообщение от pt81

Но я нашел плагин где курсор не помирает

При наведении на "Аплоад" руки там тоже нет...

ksa · #9 (**permalink**) 25.11.2010, 20:26

B@rmaley.e><e, для иллюстрации...

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
</script>
</HEAD>
<BODY bgcolor="F8F8FF">
<div style="width: 160px; height: 20px; overflow: hidden; border: 1px solid red;" id="foto_form_div">
	<a class="addm" href="#" id="foto_upload_link">Загрузить фото</a> 
	<input  type="file" id="foto_upload" name="foto_upload" 
		style="font-size: 30px; width: 160px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px;; left: 0px" 
	/>
</div>
<div style='position: relative; top: -20px; left: 0; width: 100%; height: 100px; cursor: pointer; border: 1px solid;'></div>
</BODY>
</HTML>

pt81 · #10 (**permalink**) 25.11.2010, 20:26

Сообщение от ksa

При наведении на "Уплоад" руки там тоже нет...

Руки то там нет. Но и курсор не такой как у меня, а вполне приемлимый...
Как такой сделать???

Форум

Справочник

Discord чат

Курсы javascript