开发者

css cursor:pointer [closed]

开发者 https://www.devze.com 2023-04-08 06:25 出处:网络
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical andcannot be reasonably answered in its current form. For help开发者
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help开发者_Python百科 clarifying this question so that it can be reopened, visit the help center. Closed 11 years ago.

I have this code over here

.file-wrapper {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.file-wrapper input {
  cursor: pointer;
  font-size: 100px;
  height: 100%;
  filter: alpha(opacity=1);
  -moz-opacity: 0.01;
  opacity: 0.01;
  position: absolute;
  right: 0;
  top: 0;
}

.file-wrapper .button {
  background: #79130e;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  margin-right: 5px;
  padding: 4px 18px;
  text-transform: uppercase;
}
<span class="file-wrapper">
  <input type="file" name="photo" id="photo" />
  <span class="button">Choose a Photo</span>
</span>

in Safari and Google chrome browsers it does not show the cursor as pointer, so what's wrong?


Styling a <input type='file'> can be hit-and-miss.

A lot of functionality is removed from these fields, due to security issues, including some CSS styling functionality. This is because if a file input field can be styled to look like something else, it may be possible for a malicious site to trick users into uploading files without intending to.

The exact features which are disabled for file input fields varies between browsers, so my guess is that the cursor style is disabled for these fields in Webkit-based browsers but not in other browsers.

I can see in your Fiddle that you've made quite an effort to get around some of these restrictions by overlaying a button on top of your file input field, but my guess is that the cursor restriction is going to be harder to work around.

If this is the case, then it is something you are just going to have to live with.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号