TL; DR：这有效，但是YMMV

Question

我正在使用jQueryUI datepicker小部件，

  $(function() {
      $( "#datepicker" ).datepicker({
          showOn: "button",
          //buttonImage: "images/calendar.gif",
          buttonImageOnly: true,
          buttonText: "Select date"
      });
 });

如果我从datepicker中删除buttonImage属性，我可以通过CSS设置图像

.ui-datepicker-trigger { 
    background-image: url("images/calendar.gif",);
}

这种方法让我在图像周围留下一个黄色方框。这是因为img元素没有分配给它的src属性的图像，而是有一个背景图像。

这种方法是错误的，但如果我必须使用它，这意味着从jQuery中删除图像并仅通过CSS添加它，有没有办法删除图像周围的黄色框？

border:0 does not work.

干杯！

JSFIDDLE

在小提琴中，你可以清楚地看到边框。如果取消注释jQuery img部分，它将覆盖CSS并且不再出现边框。

Answer 1

新答案，因为您采取的方法很有趣，我通常不会推荐它。 然而... 的

<强> UPDATED FIDDLE

以下是我们改变的一切：

$(function() {
  $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
      buttonImageOnly: true,
      buttonText: "Select date"
  });
});

特别注意新的按钮图片：data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

这是1px x 1px透明图像的Base64编码。这将消除图像的空src默认渲染，允许图像的背景图像显示有增无减。

我不建议将图像用作背景图像按钮元素，除非将来绝对必要，因为它不仅在语义上不正确，而且还不可避免地会出现一些跨浏览器问题。公平警告。

TL; DR：这有效，但是YMMV

Answer 2

只是为了好玩，作为Josh Burgess回答的替代方案，我能够通过使用纯css执行以下操作并注释掉buttonImageTrue来实现您期望的目标：

JSFIDDLE

更新了js

  $(function() {
      $( "#datepicker" ).datepicker({
          showOn: "button",
          //buttonImage: "http://upload.wikimedia.org/wikipedia/commons/a/aa/Wink(16px).svg",
          //buttonImageOnly: true,
          buttonText: "Select date"
      });
 });

CSS

.ui-datepicker-trigger { 
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/a/aa/Wink(16px).svg");
    width: 16px;
    height: 16px;
    background-color: transparent;
    border: none;
    color: transparent;
    }

Answer 3

当然，只需将其添加到CSS

即可

#datepicker button img {
    display: none!important;
}

如果没有一些示例代码，我担心这是我能提供的最好的代码。

如何删除图像标记周围的黄色框？

3 个答案:

TL; DR：这有效，但是YMMV