We Keep Coding

How to change the control bar color in Fancybox 3?

I want to change the color of the controls of my Fancybox 3 gallery, as the default is barely readable.
I already loaded a separate Fancybox stylesheet, that allows me to change the color of the background. I can not find a way to change the color of the controls using the same method, though.
Contents of fancybox.css:
.fancybox-bg {
background: #ccc;
}
.fancybox-is-open .fancybox-bg {
opacity: 0.4;
}

You should be more specific about what color you would like to change, but if you refer to buttons in the top right corner, then you can do that by tweaking .fancybox-button class, example:
.fancybox-button {
background: red;
color: #fff; /* Tip: This will change icon color */
padding: 0; /* Tip: Change padding to resize icon */
}
Important: Make sure you add your CSS customization code AFTER including fancybox.css

Please use the parent element or class or id to override plugin css.
For example
div .fancybox-bg{...}
or
.class_name .fancybox-bg{...}

Use
.fancybox-bg {
background: #ccc !important;
}

Remove panel border default css in ExtJS 5

I want to remove panel border completely (border, background-image and all). I have a window which has 6 panel and every panel has title. I want only title name without any border.
Question may be duplicate but i didn't get answer.
I have tried border: false but doesn't work.

Add a cls option to the window so that you can scope your "no border" styles:
cls: 'noPanelBorder'
Then use this:
.noPanelBorder .x-panel-body-default,
.noPanelBorder .x-panel-header-default,
.noPanelBorder .x-panel-default {
border: none;
box-shadow: none;
background: none;
}
See example: https://fiddle.sencha.com/#fiddle/sbs
Note that using SCSS with Sencha CMD is recommended so that the style declarations can look simpler.

Remove dotted border from dialog box when click on it

I have this problem :
I have a dialog box that I open through JQuery and everithing goes fine, but when I click on it, a thin dotted line appears around the div that contains the dialog box (I have two buttons so this append every time). I would like to remove this line via Jquery or Css, it doesn't matter, I just don't want it to shows.
I think i have to override some css class from dialog box, but I can't figure out wich one.
Thanks.

I guess you can use CSS:
.button-selector {
outline: none;
}

Ok, thanks to your advice I managed what I want.
I've just to set
.ui-widget-content {
outline: none;
}

How to remove the border around image appearing after clicking on the image in Google Chrome?

Actually I'm using a plugin SpryTabs to navigate the menu. I've used two background-images for activating and deactivating of tabs. I'm activating a tab on hover. Means the tab gets highlighted and deactivate the selected tab on clicking other tab.
Until here everything is fine. But the real problem comes when user clicks on the tab after hover, the border gets displayed around the image.
This doesn't happen in Firefox, it happens only in Chrome and IE.

You can add the following code in CSS for specific elements
textarea:focus, input:focus{
outline: none;
}
And for all elements on a page use this generalized code in your css
*:focus {
outline: none;
}
This worked for me when there was an orange coloured border appearing around the images and input boxes.

Try outline: none; on the images

Had same issue once, following style fixed problem:
outline: 1px solid transparent;
Btw outline:none has no effect for chrome for some reason

Useoutline:none or outline:0
Check the similar one here

Remove Opera Mobile blue border around <a> links

I have an webapp, where buttons are created with <a> elements, and all have href set to #. I want to remove blue border around <a> links during mouse click, because Opera Mobile annoyingly highlights all <a> elements, which has same href set.
Example picture:
How can I remove it?

I think Opera may be looking for something a little stricter on the outline element.
Try:
a:focus { outline:0px solid #fff; }
The 'solid' and 'colour' will be ignored.

Try this:
a, a:active, a:focus {outline:none}
Also if you are having trouble on a Flash object/embed, you can:
object, embed {outline: 0}

Not 100% because I can't really test, but did you try adding outline: none; to the css for links? You may need to add it to a:focus and/or a:target
Uh-oh:
Spatial navigation: Spatial Navigation
is an Opera feature whereby each
element available for activation is
put into a collection. When the user
moves a joystick or clicks specific
keys, the focus is moved to the next
element in the collection. This
element is typically highlighted with
a blue or black border. Links, form
controls, and elements with onclick
handlers are added to the collection.
http://dev.opera.com/articles/view/characteristics-of-widgets-on-mobile-pho/

Use div's with onclick() handler, instead staight <a> or buttons:
Example:
In CSS:
#home-send{
background: url(gfx/button.png) no-repeat;}
On page:
<div id="home-send" onclick="next('NEXT ACTION');"></div>
On click on the DIV the action will take place ,but no outline borders effect.
I hope this help

To remove the Blue border use this on TOP of you CSS file
:focus { outline: 0 solid; }
or
:focus { outline: none; }

I have had the same problem and none of the answers here worked. However, I recently found a solution that worked for me (A little late to the party however...).
Try:
:focus{
outline: 2px solid rgba(0,0,0,0.0);
}
If that doesn't work, you can go more specific like:
a, a:active, a:focus {
outline: 2px solid rgba(0,0,0,0.0);
}
You need to actually set an outline first, then make it transparent.
https://dev.opera.com/tv/tweaking-spatial-navigation-for-tv-browsing/