jquery - How can I remove this yellow box around my image tag? -

jquery - How can I remove this yellow box around my image tag? -

i'm using jqueryui datepicker widget,

$(function() { $( "#datepicker" ).datepicker({ showon: "button", //buttonimage: "images/calendar.gif", buttonimageonly: true, buttontext: "select date" }); });

if remove buttonimage attribute datepicker, able set image through css

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

this approach leaves me yellowish box around image. becuse img element has no image assigned it's src attribute , instead has background image.

this approach wrong, if had utilize it, means removing image jquery , adding through css, there way remove yellowish box around image?

border:0 not work.

cheers!

jsfiddle

in fiddle, can see border clearly. if uncomment jquery img part, overrides css , border no longer appears.

just fun, alternative josh burgess answer, able accomplish desired goal doing next pure css , commenting out buttonimagetrue:

jsfiddle

updated 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; }

jquery css image jquery-ui