Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   свой input type=file проблема с видом курсора (https://javascript.ru/forum/dom-window/13313-svojj-input-type%3Dfile-problema-s-vidom-kursora.html)

pt81 25.11.2010 19:07

свой input type=file проблема с видом курсора
 
Сделал свой input file выглядит в виде ссылке при клике на которую открывается диалог выбора файла.
Все хорошо но нужен у ссылки стиль cursor:pointer. 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 25.11.2010 20:11

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

B@rmaley.e><e 25.11.2010 20:15

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

pt81 25.11.2010 20:16

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

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

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

pt81 25.11.2010 20:16

Цитата:

Сообщение от B@rmaley.e><e (Сообщение 80711)
Сделайте див-обертку, которой задавайте курсор.

Так делаю...

pt81 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 25.11.2010 20:23

Цитата:

Сообщение от B@rmaley.e><e
Сделайте див-обертку, которой задавайте курсор.

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

ksa 25.11.2010 20:24

Цитата:

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

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

ksa 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 25.11.2010 20:26

Цитата:

Сообщение от ksa (Сообщение 80718)
При наведении на "Уплоад" руки там тоже нет... :)


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

ksa 25.11.2010 20:29

Цитата:

Сообщение от pt81
Но и курсор не такой как у меня, а вполне приемлимый...

Обычный курсор - дефаульт... В моём примере внутри красной рамки такой же...
Или ты про что?

monolithed 25.11.2010 20:30

Цитата:

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

И не будет, т.к. это не по стандарту, даже умы гугла не смогли это обойти и оставили текстовый курсор

ksa 25.11.2010 20:38

pt81, лови! Вроде замучил я его. :D

погорячился... :(

monolithed 25.11.2010 20:42

Цитата:

Сообщение от ksa
Вроде замучил я его.

он же не работает;)
нет все просто

ps: лишняя точка с запятой

ksa 25.11.2010 20:44

Цитата:

Сообщение от monolithed
он же не работает

Рука-то появилась... Но сам диалог не вызывается... :(

pt81 25.11.2010 20:49

Цитата:

Сообщение от ksa (Сообщение 80722)
Обычный курсор - дефаульт... В моём примере внутри красной рамки такой же...
Или ты про что?

Да дефаулт, но выглядит он в примере из плагина по другому. не как рука а как стрелочка, а в моем коде как текстовый.

ksa 25.11.2010 20:53

Цитата:

Сообщение от pt81 (Сообщение 80712)
Но я нашел плагин где курсор не помирает

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

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

Вариант с подсветкой...

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
.off {
	border: 1px solid;
}
.on {
	border: 1px solid;
	border-right: 3px solid;
	border-bottom: 3px solid;
	background-color: silver;
}
</style>
<script>
</script>
</HEAD>
<BODY>
<br />
<div class='off' onmouseover='this.className="on"' onmouseout='this.className="off"' 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>
</BODY>
</HTML>

ksa 25.11.2010 20:55

Цитата:

Сообщение от pt81
а в моем коде как текстовый.

Так ты добейся того, чтобы кнопка "Обзор" была на весь прямоугольник. В моём примере курсор дефаульт, а не эдит, как ты пишешь...

monolithed 25.11.2010 20:55

Это максимум, все остальное сводится лишь к стилизации кнопки:
<div style="overflow: hidden; position: absolute; width: 70px; height: 26px;">
    <div style="overflow: hidden; position: absolute; left: -146px; height: 23px;">
        <input type="file" />
    </div>
</div>

pt81 25.11.2010 21:10

Цитата:

Сообщение от monolithed (Сообщение 80737)
Это максимум, все остальное сводится лишь к стилизации кнопки:
<div style="overflow: hidden; position: absolute; width: 70px; height: 26px;">
    <div style="overflow: hidden; position: absolute; left: -146px; height: 23px;">
    <input type="file" />
</div>

В FF не работает((

monolithed 25.11.2010 21:18

Цитата:

Сообщение от pt81
В FF не работает((

Я в нем и делал)) 3.6.8 версия
Но сделать этот вариант кроссбраузерным не проблема, к тому же можно кнопке картинку назначить

pt81 25.11.2010 21:26

Цитата:

Сообщение от monolithed (Сообщение 80742)
Я в нем и делал)) 3.6.8 версия
Но сделать этот вариант кроссбраузерным не проблема, к тому же можно кнопке картинку назначить

Я даже когда в форуме смотрю твой код в хроме работает, а в файрфоксе все смещается и кнопка видна.

monolithed 25.11.2010 21:38

Цитата:

Сообщение от pt81
в файрфоксе все смещается и кнопка видна.

какая версия?

ksa 25.11.2010 21:56

monolithed, у тебя там из двух ДИВов закрыт вроде только один...

monolithed 25.11.2010 22:01

Упс, исправил))

pt81 25.11.2010 22:10

Заработало вот что

<div style="overflow:hidden; height:20px; width:160px; position:relative;">
  <input type="file" id="fileupload-1" autocomplete="off" style="font-size:60px; position: absolute; left: -650px;top:0px;opacity: 0; filter:alpha(opacity: 0); cursor:pointer;" />
  <a class="addm" href="#" id="foto_upload_link">Загрузить фото</a>
</div>

pt81 25.11.2010 22:11

Но при этом в FF последнем не рука а указатель, в других браузерах рука.
Вроде приемлимо.

pt81 25.11.2010 22:15

А как сделать что бы в файловом диалоге принимались только файлы типа jpg ??

ksa 25.11.2010 22:38

Цитата:

Сообщение от pt81
как сделать что бы в файловом диалоге принимались только файлы типа jpg ?

Как вариант...

pt81 26.11.2010 15:11

Цитата:

Сообщение от ksa (Сообщение 80762)
Как вариант...

Пожалуй не рискну придется просто выводить ошибку когда тип не jpg

dmitriymar 26.11.2010 18:45

народ я один это вижу? у него курсор не pointer a ointer

pt81 26.11.2010 21:27

Где он там ointer?

dmitriymar 26.11.2010 21:39

Сделал свой input file выглядит в виде ссылке при клике на которую открывается диалог выбора файла.
Все хорошо но нужен у ссылки стиль cursorointer. Cделать не получается так как input type=file не признает такой стиль об чем везде написано.
Ну а ссылке давать стиль бесполезно, все равно курсор не рука.

dmitriymar 26.11.2010 21:43

была тож проблемма с ff когда во всех была рука а в нём нет. проблема оказалась (писал hand) все кроме ff принимали. поставил pointer и ff принял

ksa 26.11.2010 21:46

Цитата:

Сообщение от pt81
Пожалуй не рискну

Дело твоё... :)


Часовой пояс GMT +3, время: 03:00.