anyone please help, how to hide border flickity slider in chrome. The border just show in Browser Chrome only. may be like this :
or u can visit my blog : aqiqoh-syafaat.blogspot.co.id
thanks
To remove the outline from just flickity elements you can add the following css
.flickity-enabled:focus {
outline: none;
}
As others have said removing this globally is bad for accessibility. If you use the dots or nav features for flickity you would ideally add focus to these elements.
Can you please tell exactly where how you can see that border.
Generally this border appears as outline on focus(if), you can set
*:focus{
outline:none;
}
This will remove that blue border from everywhere.
or simply outline:none; on element or its pseudo class
(Use !important if needed.)
Related
Im using quilljs and would like to remove the border around the toolbar, i don't know how to select the right element but i have tried:
.ql-toolbar
border: none
shadow: none
outline: none
For people coming with similar questions about quilljs borders, you could remove it by looking at the element via devtools -F12 and setting border to zero . Similarly you can remove other borders and manipulate other properties, not just the border
for example to remove borders of full editor
.ql-container.ql-snow{ border: none !important;}
why? because thats the element popping out in the dom
Also I was inspired from comments answer which was given by
Farid Vatani for removing toolbar borders
ql-toolbar.ql-snow { border: none !important;}
I have a PWA where I turn off scrollbars. for Chrome I've used: -
::-webkit-scrollbar {
display: none;
}
Now for non-touch PC users I want to turn scrollbars on for certain elements. The problem is when I get rid of "Display: None" I get the space for a scrollbar but it's invisible. When I style it (eg: background-color) I can see it.
Why is it invisible?
Just make document scrollbar invisible, pseudo selector can be tied to an element.
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
}
Spewin' When you define the pseudo element you have to take control of ALL attributes :-(
Remove the CSS pseudo-element definition completely an the scrollbars go back to defaults.
The code I'm using for previous and next buttons in carousel is as follows:
COde screenshot is here
But I'm having a problem of different background color near those button as shown in the screenshot I've attached:
<\a>
Could anyone please me removing those grey background. Please let me know the alternatives I can use also.
Set the carousel left and right classes background images to none! Your problem will be solved!
Just set the background-image property to none.
.carousel-control.left, .carousel-control.right {
background-image: none!important;
}
I'm currently working on my exam project, and I have this animated jQuery navigation.
I would like to make the text-color of the white, both when I have mouse over the itself AND when I have the mouse over the menu icon which is shown when you mouse over the <li> elements.
I have tried everything, but haven't found a solution for it.
Demo
Stylesheet
Example: If you have your mouse over Forside (text is white), and then take your mouse over the white house icon, you'll see that the text change from white to black. I want it to stay white.
NOTE: Dont mind the crappy colors or layout, lol, right now I'm just focusing on the menu.
Anyone has a fix for this, please?
Thanks in advance.
The answer above does work:
li:hover a { color: white !important; }
You could also surround the anchor tags with a div with a class of say, "target", and then target the div using jQuery to programmatically set a class with the color property set to white:
$('.target').hover(function(){
$(this).children(':first-child').toggleClass('className');
}, function(){
$(this).children(':first-child').toggleClass('className');
});
Something like that... but the CSS way is much easier :)
Wow, I didn't imagine this being such a hard task. The following might not be an elegant solution, but it works:
li:hover a { color: white !important; }
How can I underline a text replaced with Cufon?
text-decoration is not supported by Cufon:
https://github.com/sorccu/cufon/wiki/known-bugs-and-issues
Perhaps you could add a border-bottom property to the element using normal CSS?
Cufon adds a class to the elements it creates that you can style (useful if your containing element has pads/margins). So for a link, just use this:
a .cufon {border-bottom: solid 1px #000000}
a:hover .cufon {border-bottom: none}
To keep your elements from shifting up/down, either add a border to the non hover state, or adjust the heights of both elements accordingly...
Be aware though. Adding a border bottom to a cufon class is quite ugly.
I'd be best to avoid underlines to these fonts in your design. It might look nice in Photoshop, but don't show this to you customers. It doesn't work out that well in HTML/CSS.