How to change fancybox border color

问题

I've been trying to change fancybox's border color from white. I've succeeded in targeting every part of fancybox except the border. How can I change the color of the fancybox border?

回答1:

If you're using 1.3.4, the border is in #fancybox-content css rule. A quick firebug or devtools inspect will tell you that.

UPDATE [March 2015] for both versions:

For Fancybox v1.3.4

<style type="text/css">
#fancybox-content {
 border-color: #FF0000 !important; /* or whatever */
}
</style>

JSFIDDLE

For Fancybox v2.0.x

<style type="text/css">
.fancybox-outer {
 background-color: #FF0000; /* or whatever */
}
</style>

For Fancybox v2.1.x

<style type="text/css">
.fancybox-skin {
 background-color: #FF0000 !important; /* or whatever */
}
</style>

JSFIDDLE

Notice the difference between fancybox v2.0.x and v2.1.x

回答2:

Using fancybox 2.x, the thing that worked for me was:

<style type="text/css">
.fancybox-skin {
 background-color: #FF0000; /* or whatever */
}
</style>

This seems to set the color of the frame, the width of which is set through the "padding" parameter to the $(".fancybox").fancybox(...) init function.

回答3:

Change the border-color property, not the background-color. That's what I had to do.

回答4:

But if you want a "real border": In your...

$('.fancybox').fancybox({

...set padding : 0,

...and in your css:

.fancybox-outer, .fancybox-inner {position: relative;}

...add, e.g. border:1px solid #f00;

来源：https://stackoverflow.com/questions/9253255/how-to-change-fancybox-border-color

标签

css

fancybox