0

FileUploadボタンの上にマウスカーソルを置くと、次のようになります。ポインタタイプはボタンの側面にのみ表示されますが、ラベル領域の上にある場合、カーソルはタイプテキストに変わります。デフォルトのFileUploadCSSは問題ないようです。さらに、ラベルなど、摩擦を引き起こす可能性のあるスタイルオプションは見つかりませんでした。

ここに画像の説明を入力してください

FileUploadのデフォルトのCSS

.fileupload-buttonbar .ui-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  border-width: 0 0 100px 200px;
  opacity: 0;
  filter: alpha(opacity=0);
  -o-transform: translate(250px, -50px) scale(1);
  direction: ltr;
  cursor: pointer;
  z-index: 5000;
}

XHTML

<p:fileUpload style="pointer:cursor !important"
    fileUploadListener="#{controller.doSomething}"
    mode="advanced" label="Examinar"
    auto="true" 
/>

CSSをオーバーライドしようとしましたが、変更はありません。

注：この動作は、Chrome（デフォルトカーソル）とFirefox（テキストカーソル）でのみ発生します。IEで正常に動作します。

データテーブルコンポーネントに関するカーソルの問題について読んだことがありますが、これまでのところ、この奇妙な不便さを取り除くことはできませんでした。

これについて何か考えはありますか？

4

1 に答える 1

1

これにより、Chromeを使用できるようになります。

input[type="file"]::-webkit-file-upload-button { cursor: pointer; }

頭のてっぺんから、Firefoxではフォールバック戦術が機能したと思いますか？：

input[type="file"] { cursor: pointer; cursor: hand; }

これはブラウザのスタイリング「もの」であるため、CSSで回答にタグを付けることをお勧めします。

于 2013-02-14T18:00:53.837 に答える