Question

I have been using twitter bootstrap to build a small blog site for myself and I have recently had to introduce a third party fileupload app into my project. The file uploader has the relevant CSS files to style the “upload button” and a JS element creates the respective markups.

The problem is when I look at my HTML – when my cursor points towards the “upload button” it looks like an I beam rather than a “hand” and also strangely enough, I see the “hand” cursor on the entire “row” of the upload button, but not on the upload button (over the upload button its an I beam).

I would like to add that on my “pure twitter bootstrap buttons” I do not have this problem, but rather only when I integrate this third party app. I have tried for example changing the cursor parameters, but nothing seems to work. Some relevant code follows:

So, In my HTML, I have:

<div id="file-uploader"></div>

and my CSS look like this:

.qq-uploader { position:relative; width: 100%; cursor: pointer;}

.qq-upload-button {
  font-family: Qlassik,'Qlassik Medium',fallback_Qlassik,sans-serif;

  display: inline-block;
  *display: inline;
  padding: 10px 10px 10px;
  margin-top:0px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 16px;
  line-height: 10px;
  *line-height: 20px;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #0074cc;
  *background-color: #0055cc;
  background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
  background-image: -o-linear-gradient(top, #0088cc, #0055cc);
  background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
  background-image: linear-gradient(top, #0088cc, #0055cc);
  background-repeat: repeat-x;
  border-color: #0055cc #0055cc #003580;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

}

.qq-upload-button-hover {background:#0055cc;cursor: default;}
.qq-upload-button-focus {outline:1px dotted black;cursor: default;}

.qq-upload-drop-area {
    position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
    background:#FF9797; text-align:center; 
}

.qq-upload-drop-area span {
    display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;
}

.qq-upload-drop-area-active {background:#FF7171;}

.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;}
.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:15px;font-family: Qlassik,'Qlassik Medium',fallback_Qlassik,sans-serif;}
.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
margin-right: 7px;
}

.qq-upload-file {}
.qq-upload-spinner {display:inline-block; background: url("loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
.qq-upload-size,.qq-upload-cancel {font-size:15px;}

.qq-upload-failed-text {display:none;}
.qq-upload-fail .qq-upload-failed-text {display:inline;}

The relevant javascript is on here(https://github.com/GoodCloud/django-ajax-uploader/blob/master/ajaxuploader/static/ajaxuploader/js/fileuploader.js) – if that helps.

I would appreciate any tips or guidance you may have to solve the problem.

Answer 1

try forcing the original cursor with an !important or the other option is overriding it in your global css file.

Seems like the following may be injected via JS as the previous .qq-upload-button has cursor: defined as well.

.qq-upload-button-hover {background:#0055cc;cursor: default;}
.qq-upload-button-focus {outline:1px dotted black;cursor: default;}

Hope that helps lead you…