When I click play button, subttitles button or fullscreen button, That shows a blue border or blue box-shadow, so every video.js player have that, i want to disable that i have try like this but is not working!
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-`big-play-button`,
.vjs-flat-skin .vjs-fullscreen-control,
.vjs-flat-skin .vjs-subtitles-button,
.video-js.vjs-default-skin.vjs-paused .vjs-big-play-button {
border: none !important;
box-shadow: none !important;
}
so this code i think is not corect, so i need an other CSS code to disable all those blue borders, or box-shadows?
Try removing the comma from the selector and back-ticks from "big-play-button"
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-big-play-button,
.vjs-flat-skin .vjs-fullscreen-control,
.vjs-flat-skin .vjs-subtitles-button,
.video-js.vjs-default-skin.vjs-paused .vjs-big-play-button { /*Remove comma from end*/
border: none !important;
box-shadow: none !important;
}
Here is the demo: http://jsfiddle.net/lotusgodkk/0a5u3ew4/834/
Here is the original video: http://jsfiddle.net/bababalcksheep/0a5u3ew4/2/
Related
Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css
.toolbarbutton-icon
{
border-radius: 5px !important;
box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
background-color: var(--uc-regular-colour) !important;
width: 26px !important;
height: 26px !important;
padding: 5px !important;
}
This block of code changes the size and color of all toolbar buttons including extension icons
Then I used this block of code to change its color when hover over them
*:hover > .toolbarbutton-icon{
background-color: green !important;
}
Which changes color of buttons when hover but the extension buttons stays the same.
How can I change it without having to define each extension name or property
Below are some screenshots to demonstrate the issue
As you can see except extension button all buttons change color
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color
It will be a problem when you use >.
The > notation applies only to the immediate children of that element.
Try use:
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Hope this helps.
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox
I am building an Ionic App. I have rounded the buttons in order to make them more beautiful, but when I do that the border stays just like the photo that is linked.
I have tried with these different methods but none of them worked:
border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
text-shadow: none !important;
box-shadow: none !important;
button 1
It also happens with this other button:
button 2
I cannot use ion-buttons because the text just crashes with it.
Thanks you very much.
You can easily use the css properties --border-color and --border-width like this: --border-color: none; --border-width: 0px !important;. I hope this will be helpful.
Check the properties of the ion-button:
https://ionicframework.com/docs/api/button
--border-color Border color of the button
--border-radius Border radius of the button
--border-style Border style of the button
--border-width Border width of the button
--box-shadow Box shadow of the button
these can be applied to the specific class.
Or within the global.scss file, just add your styling:
ion-button {
...
}
I have a select form in Bootstrap 4 with dark background, when I select an option I want the background after selection to stay dark. My example works in Chrome and Firefox. But in IE and Edge the background stays white while in focus. Check my jsfiddle, any ideas?
.form-control:focus {
background-color: #121212;
border-color: #121212;
outline: 0;
box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}
https://jsfiddle.net/cd1eyqvr/3/
Keep the .form-control:focus part and add this in your css:
.form-control:focus::-ms-value {
background-color: #242424 !important;
border-color: #121212 !important;
color: #ffffff !important;
outline: 0 !important;
box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}
This part will work in IE11 and Edge.
You can refer to the demo I made: https://jsfiddle.net/yuzhou0602/ofwvuzyr/4/
Check this link from offical docs:
https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/
It seems the edge has problems with box shadow and you must add extra css to your stylesheet Check the links blow for more help about your problem Box shadow not working in microsoft edge
And also check this link for complete box shadow in edge solutions
https://css-tricks.com/snippets/css/css-box-shadow/
Everyone,
I am a newbie in WordPress (working on localhost). I want to change the hover color of WooCommerce mini cart widget button.
I have written the following code:
.widget_shopping_cart .button {
margin:0.5em 0 0;
width:100%;
background: white !important;
}
.widget_shopping_cart .button:hover {
width:100%;
background: white !important;
}
It works, though when I hover over the button (background color set to white) though I get the grey overlay on top (regardless my selected hover background color). This is totally bugging me as it ruins my selected color by making it dirtier (darker). How can I get rid of it? I am using flat some theme.
.widget_shopping_cart .button:hover {
width:100%;
background: white !important;
box-shadow: none !important;
}
set the css property box-shadow to none and you are good
chrome(osx) bug: select tag css border 0
i want a border 0 select tag, so I set border style of select tag to 0,then I get what i want.
But its default inset shadow overflows the border.
(the picture below shows the bug in chrome.)
i want to keep everything of the select tag(border=0) except the overflowing shadow.
Anybody can help me.
select{border:0;}
Try this
select{
-webkit-appearance: none;
box-shadow: none !important;
}
:-webkit-autofill {
color: #fff !important;
}
select:focus {
outline: none;
}