изменить тип курсора на тип ввода = "файл"

<p>простой вопрос ... как мне изменить тип курсора на тип ввода файла?</p><p>я пробовал следующее:</p><pre><code><!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <style> input[type="file"] { cursor: pointer; } </style> </head> <body> <input type="file"> </body> </html> </code></pre><p>по какой-то причине он не будет играть в мяч. </p>

<p>это работает по-разному в разных браузерах. я предполагаю, что это потому, что тип ввода файла довольно особенный.</p><p>какой браузер/версию вы используете?</p><p>я знаю, что ie6 не поддерживает указание типа в стиле.</p><h1>как это работает в разных браузерах</h1><h2>ie7 +</h2><p>работает отлично.</p><h2>fire fox</h2><p>проблема исправлена, поэтому теперь работает отлично. смотрите <a href="https://bugzilla.mozilla.org/show\_bug.cgi?id=431524">отчет об ошибке</a> по этому вопросу.<br> в версии 3.5 он не работал вообще.</p><h2>chrome и safari <sub><sup>(идентичное поведение)</sup></sub></h2><p>использует стрелку над кнопкой, но ваш определенный курсор над остальными.</p><h2>опера</h2><p>работает отлично.</p><hr><p>обратите внимание, что есть несколько способов решения этой проблемы, использующих различные методы. <a href="https://stackoverflow.com/a/9182787/109392">ответ bjarkeck</a> - это одно изящное решение, которое мне нравится, и оно работает во всех основных браузерах. </p>

<p><code>cursor:pointer</code> не работает с входным файлом только из-за кнопки по умолчанию. никаких особых причин здесь. вы должны удалить его внешний вид с помощью этого кода, обратите внимание с помощью <code>font-size:0</code>.</p><p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type='file']{ opacity: 0; cursor: pointer; width: 24px; height: 24px; font-size: 0; position: absolute; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><input type="file"> <img width="24" height="24" title="" alt="" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabgaaaaycayaaadgdz34aaads0leqvr42rwva2ioyrjh9+zd+dw2owagwkjzry5fldc1nbaxstnvykawc8ohozaletwhsvgkzo0yiyemgzkwpzhdbbhmxe7v63fp/0j7ygq89e/+xfdzuj7/dv/3/tp+//nndhdd2o4riqhbnilgipl3+xytjuo0mkz4o3zllevve3uuymauldxeepl0mrunxeatmj/ifmlfjzhekblv+punbeprq8427wn/jxpmejxm4seoah0yf+g9wonmvotfk+o2wetnyz6w2kc9fnfuqtz7auf0+dv8ft4gz6ovxpxe7xllgz8wf4clk39mmlnwzdopjppahcjwoaiohp/ct+ba3d9j/i3yejuztmnunuwhd8dtcag8fk4ica2jeuyyfkm4cyb1agez0bouyw6qlwoeaklluy25uol+fosubab8o1whmws+r+yaduojbemi4wjyo4rv5scwmdic2lzyejfbaxaynimdi78nqoxcwcik2kshgmb/+ars6/be8udguyw5kmkbfa5o1qckwfnjuoqwacnddvrul5wsxo1oobrixpygj9w6n9vkgdzrjmreuwqpreygg7mjromlzl5k5v2e8xa/2jkshc9okfui78qnxlaydxgteqkccvfcw+hx8liudqwfr6ey1b/1rm/qmjsp8lckus4cnnheqbt032g5s4+qr8prihwccb1kk/kmmssib8gdcdvfkebyu/b45ntzt3ctg9icfgq8zdww+ay8wg36ua7m8xyzm2cxbrqkelmc2/ae+dkccmeac/w8nuutwthvcj0wtlxnmhmes4ljxbvoolmf22erwsh4btztugufarpadm9ixg0naffa1hqvteat4cwshhlxybhdlwqj4lxnp2ifuuuystrc2zpb6lwdyagqzdimeydntaofntjoosistxuot3q9bw6bc+e62hb7eojq4irgysy5zo2e4+fmrye5ga0vsjpwtbbmtbzwg6ayejxgkxbtdskxwopbkp3tn2dy0c5vhp/by7tiv9p0idrunlafns3uuw6j3uqsazm8onpsqayrflr3g1rd2rtydzajb0wygadzphhubqfqhd+i39jx6p5oobcjispawq7nqq4oitwem7hqrmyvfv/gx/vm2uis7hfltfg7tuud1c67udqdn63hvypoufmuebtur/kxls9cu3w7h3zbtwb/laoxlqdnlabbu37vuww9bn+lidrbnxljbmppno/6w7hj/b383e4gejzq9k+/p78fan0xnygweggaaaaasuvork5cyii=" /></code></pre> </div> </div> </p><p><strong> это работает, вероятно, на chrome, firefox и ie. </strong> </p>

<p>я встретил этот вопрос сегодня и с:</p><pre><code>/* chrome/safari and web-kit-based browsers (if it doesn't work, try maybe also on the parent/wrapper) */ ::-webkit-file-upload-button { cursor:pointer; } /* ie11 (if it doesn't work, try maybe also on the parent/wrapper) */ input[type=file] { cursor:pointer; } </code></pre><p>вроде все нормально :-)</p>

<p><strong> если </strong> вы хотите заставить курсор быть рукой, чтобы поместить его на изображение, вот</p><h2><strong> простой путь и как это работает все браузеры: </strong></h2><p>html:</p><pre><code><img src="/images/uploadbutton.png" id="upfile1" style="cursor:pointer" /> <input type="file" id="file1" name="file1" style="display:none" /> </code></pre><p>jquery:</p><pre><code>$("#upfile1").click(function () { $("#file1").trigger('click'); }); </code></pre><p>затем вы можете нажать на любую кнопку, чтобы загрузить файл, и у вас есть курсор-указатель.</p><hr><p>в chrome и opera курсор становится указателем только на отступы, и если <code>display:block;</code>, поэтому для этих браузеров вы должны сделать это:</p><pre><code><input type="file" id="file1" name="file1" style="display:block; padding:29px 0 0 0;" /> </code></pre>

<p>я сделал следующее:</p><pre><code><li>file<input id="file\_inp" type="file" /></li> </code></pre><p>для ли:</p><pre><code>li { /*...*/ position:relative; overflow:hidden; /*...*/ } </code></pre><p>для ввода:</p><pre><code>input#file\_inp { /*...*/ position: absolute; width: 400px; left: -200px; top:0; cursor: pointer; /*...*/ } </code></pre><p>как упоминалось ранее, курсор становится «указателем» на весь ввод, исключая кнопку. в большинстве браузеров кнопка находится на левой или правой стороне. хорошо! давайте введем огромную ширину и покажем только середину ... кнопка будет скрыта. и кликабелен весь вход.</p><p>это подходит для меня.</p>

<p>если вы пытаетесь использовать ajax uploader, вы можете попробовать другой метод для совместимых браузеров, например firefox и chrome. они поддерживают запуск события щелчка при абсолютно невидимом вводе файла. вы можете скрыть ввод файла любым способом, кроме установки его свойства отображения на none. установка {высота: 0; переполнение: скрытый} в родительской форме сделает свое дело. я использую отдельные формы для каждого загрузчика.</p><p>перенаправьте пользовательское событие нажатия кнопки на ввод скрытого файла, и все готово.</p><p>чтобы использовать эту технику, необходимо выполнить проверку navigator.useragent для движка gecko или webkit. для других движков вы должны использовать старый метод ввода прозрачного файла.</p>

<p>хром тоже давал мне эту проблему. я пытался установить все виды селекторов css, но, похоже, ничего не получалось. тем не менее, я нашел решение, используя элемент form. </p><ol> <li>назовите ваш элемент ввода [type = file].</li> <li>назовите свой элемент формы и поместите в него вход [type = file].</li> <li>сделайте промежуток и поместите его ниже ввода в форме. это будет ваш лейбл.</li> <li>используйте css, чтобы установить высоту ввода 0px и непрозрачность 0, это сделает его невидимым.</li> <li>сделайте промежуток позиционированным абсолютно и влево на 0px.</li> </ol><blockquote> <pre><code><style> #file { height:0px; opacity:0; } #span { left:0px; position:absolute; cursor: pointer; } </style> <form name="form"> <input type="file" id="file" name="file"/> <span id="span">my file label!!!!</span> </form> <script> var span = document.getelementbyid("span"); span.onclick = function(event) { document.form.file.click(event); }; </script> </code></pre> </blockquote><p>я проверял это в chrome и ff, а не, то есть, но я надеюсь, что это поможет . jsfiddle <a href="http://jsfiddle.net/aressler38/l5r8l/1/">http://jsfiddle.net/aressler38/l5r8l/1/</a> </p>

<p>прежде всего, ваш код работает в internet explorer, но не работает в firefox.</p><p>во-вторых, стандарт w3c css не позволяет стилизовать сложные теги, такие как <code><input /></code>. даже для свойства курсора.</p><p>в конце концов, смотрите <a href="http://www.quirksmode.org/dom/inputfile.html">эту страницу</a> . я не пробовал его решение, поэтому скажите нам, работает ли оно и как.</p>

<p>я узнал, что есть другой подход, чтобы сделать это. отлично работает в opera new, ff, chrome и safari. к сожалению, он не работает идеально в ie (но достаточно хорош для моего случая).</p><p>идея состоит в том, чтобы обернуть элемент <code>input=file</code> фиксированным размером div и скрытым переполнением и установить <code>cursor: pointer;</code>. затем мы перемещаем кнопку за пределы div, используя левый отступ.</p><pre><code><div class="input-file-wrap"> <input class="file-input" type="file" /> </div> </code></pre><p>и образцы стилей</p><pre><code>.input-file-wrap { background: red; height: 33px; width: 240px; overflow: hidden; position: relative; cursor: pointer; } .file-input { width: 100%; height: 100%; opacity: 0; padding-left: 240px; margin-right: -240px; cursor: pointer; } </code></pre><p>здесь вы можете найти живой пример: <a href="http://jsfiddle.net/5c5rh/2/">http://jsfiddle.net/5c5rh/2/</a> </p>

<p>попробуйте использовать:</p><pre><code>input[type=file] { cursor: pointer; cursor: hand; } </code></pre><p>посмотри, работает ли это. мне пришлось положить указатель + руку в мою, чтобы он работал в ff/chrome/и т.д. кроме того, я не уверен, имеет ли это значение, но я не думаю, что в css есть кавычки вокруг «файла».</p>

<pre><code> <span class="btn btn-success fileinput-button"> <span><i class="icon-plus icon-white"></i> select image</span> <input type="file" name="files[]"> </span> </code></pre><p>css: </p><p>.btn {курсора: указатель;}</p><p>вы можете увидеть это в действии здесь: <a href="http://blueimp.github.com/jquery-file-upload/">http://blueimp.github.com/jquery-file-upload/</a> </p><p>это не jquery делает это. это <a href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css</a> файл. я только что взял то, что мне нужно из него, и он прекрасно работает без каких-либо jquery.</p>

<p>как я это сделал: </p><pre><code> /* upoload */ #upload-profile-file { z-index: 1; } .uploadbutton input[type="file"] { cursor:pointer; position:absolute; top:0px; opacity:0; } #upload-profile-file:hover ~ #upload-profile-pic-btn { text-decoration:underline; } #upload-profile-pic-btn { z-index:-1; } </code></pre><p>а потом на моей странице просмотра:</p><pre><code> <form id="upload-profile-pic-form"> <div class="uploadbutton"> <input type="file" id="upload-profile-file" name="upload" style="width: 88px; opacity:0.0; filter:alpha(opacity=0); " onchange='upload()'/> <a id="upload-profile-pic-btn" href="#" class="expand">upload</a> </div> </form> </code></pre><p>а затем я просто отправляю свою форму через ajax на сервер и обрабатываю все остальное.</p><p>итак, tl; dr -> я передаю щелчок видимой ссылки (со всеми стилями, свистками и свистками) и фактически нажимаю на вход файла. :)</p><p>надеюсь, это кому-нибудь поможет.</p>